CSSは私のようなCSSクラスを持っている画面解像度

Question

に応じてCSSを適用します。

.container { 
    padding-left: 150px; 
} 

私が欲しいの画面解像度は、私はpadding-leftだけ10pxのようになりたいタブレットやモバイルのときです。

どうすればいいですか？

Answer 1

CSS @media queryを使用してください。たとえば、hereのように、breakpointsを引数として指定します。

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

[..etc..] 

Answer 2

CSSメディアクエリを使用します。あなたの参考例のために、私はBootstrapからリファレンスとして画面サイズを撮影しました。

/* For Mobile Phones */ 
@media screen and (max-width: 767px) { 
    .container { 
    padding-left: 10px; 
    } 
} 

/* For Tablets (Portrait) */ 
@media screen and (min-width: 768px) and (max-width: 991px) { 
    .container { 
    padding-left: 10px; 
    } 
}