プログラミング media-queries

8

いくつかのcss-class内で、lessを使用してさまざまな解像度のcss-stylesをラップすると便利です。私は次のようなことをしたいと思います： footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } 最後に、次のような結果になるはずです。 footer { width: 100%; } @media screen and (min-width: 768px) { footer { width: 768px; } } @media screen and (min-width: 992px) { footer { width: …

82 css responsive-design less media-queries

13

JavaScriptを使用してInternetExplorer（IE）とMicrosoft Edgeを検出するにはどうすればよいですか？

私はよく見てきましたが、InternetExplorerを検出する方法はたくさんあることを理解しています。私の問題はこれです：クリックすると、あらゆる種類のInternetExplorerと互換性のないJavaScript関数を呼び出すHTMLドキュメント上の領域があります。IEが使用されているかどうかを検出したいので、使用されている場合は、変数をtrueに設定します。問題は、Notepad ++からコードを記述していることです。ブラウザーでHTMLコードを実行すると、IEを検出する方法が機能しません。問題は、Notepad ++が不足していることだと思います。IEを検出できるようにする必要があります。これにより、変数に基づいて、サイトのその領域を無効にできます。私はこれを試しました： var isIE10 = false; if (navigator.userAgent.indexOf("MSIE 10") > -1) { // this is internet explorer 10 isIE10 = true; window.alert(isIE10); } var isIE = (navigator.userAgent.indexOf("MSIE") != -1); if(isIE){ if(!isIE10){ window.location = 'pages/core/ie.htm'; } } しかし、それは機能しません。Notepad ++からIEを検出するにはどうすればよいですか？それが私がHTMLをテストしているものですが、それで動作するメソッドが必要です。編集誰かがこれを重複としてマークしていることに気づきました、そしてそれは理解できます。はっきりしていなかったと思います。JQueryの回答を使用できないため、バニラJSの回答を求めているため、これは重複していません。編集＃2 Microsoft Edgeブラウザを検出する方法もありますか？

82 javascript html internet-explorer media-queries microsoft-edge

2

CSSでメディアクエリの順序が重要なのはなぜですか？

最近、私はより応答性の高いサイトを設計しており、CSSメディアクエリを頻繁に使用しています。私が気付いたパターンの1つは、メディアクエリが定義される順序が実際に重要であるということです。すべてのブラウザでテストしたわけではなく、Chromeでテストしました。この振る舞いの説明はありますか？サイトが正常に機能せず、それがクエリなのか、クエリが書き込まれる順序なのかわからない場合は、イライラすることがあります。次に例を示します。 HTML <body> <div class="one"><h1>Welcome to my website</h1></div> <div class="two"><a href="#">Contact us</a></div> </body> CSS： body{ font-size:1em; /* 16px */ } .two{margin-top:2em;} /* Media Queries */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than …

80 css media-queries responsive-design

タグ付けされた質問 「media-queries」

タグ付けされた質問「media-queries」