web-dev-qa-db-ja.com

画面サイズ/デバイスに基づいて特定のCSSスタイルを使用する方法

Bootstrap 3のレスポンシブユーティリティには、画面の解像度に応じていくつかのブロックを非表示または表示できるCSSクラスがあります http://getbootstrap.com/css/#responsive-utilities-classes

CSSファイルに、画面解像度に基づいて適用したい、または適用したくないスタイルルールがあります。

どうすればいいですか？

すべてのCSSファイルを実稼働展開のファイルに最小化しますが、異なる画面解像度の個別のCSSファイルを持つ以外に解決策がない場合は、これを回避できます。

csscss3twitter-bootstraptwitter-bootstrap-3
33
Zelid

つかいます - @mediaクエリ 。彼らはこの正確な目的を果たします。以下に、それらの仕組みの例を示します。

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
}

これは、幅が800px以下のデバイスでのみ機能します。

Mozilla Developer Network でメディアクエリの詳細をご覧ください。

66
Ranveer

検出は自動です。各画面解像度に使用できるcssを指定する必要があります。

/* for all screens, use 14px font size */
body {  
    font-size: 14px;    
}
/* responsive, form small screens, use 13px font size */
@media (max-width: 479px) {
    body {
        font-size: 13px;
    }
}
5
C.P.O

メディアクエリを使用したり、bootstrap css：

https://github.com/Heras/Responsive-Breakpoints

クラスresponsive-breakpointsを任意の要素に追加するだけで、自動的にxs sm md lg xlクラスがそれらの要素に追加されます。

デモ： https://codepen.io/HerasHackwork/pen/rGGNEK

1
Heras

@ media-queriesを使用しないのはなぜですか？これらは、まさにその目的のために設計されています。 jQueryを使用してこれを行うこともできますが、それは私の本の最後の手段です。

var s = document.createElement("script");

//Check if viewport is smaller than 768 pixels
if(window.innerWidth < 768) {
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css1";
}else { //Else we have a larger screen
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css2";
}

$(function(){
    $("head").append(s); //Inject stylesheet
})
0
Michael Koelewijn

@mediaクエリはこの目的に役立ちます。以下に例を示します。

@media only screen and (max-width: 991px) and (min-width: 769px){
 /* CSS that should be displayed if width is equal to or less than 991px and larger 
  than 768px goes here */
}

@media only screen and (max-width: 991px){
 /* CSS that should be displayed if width is equal to or less than 991px goes here */
}
0
Sugam Parajuli