CSSの標準最大幅は何ですか

Question

ユーザーがウィンドウを数十画素小さくするとCSSが変わります。しかし、私は何が必要な幅がわからない。 私のモニターは1440x900ですが、他の人は1920x1080です...そして、4Kモニターについて忘れないようにしましょう。 ここには何の幅がありますか？

@media screen and (max-width:.....?){} 

Answer 1

特定の解像度ではなく、すべての幅でページが良好に見えるようにすると、最良の結果が得られます。これは、ウィンドウの幅を狭くすることを意味し、それが悪いように見えるときは、メディアクエリーを追加して何かを変更するときです。見栄えが悪くなる瞬間は、すべてのウェブサイトによって異なります。新しいブレークポイントを20ピクセルごとに追加する必要がある場合は、メディアクエリが問題の解決策ではない可能性があります。

モニタよりも高い解像度でテストする場合は、たとえばChromeのデバイスツールバーを使用して、ビューポートのカスタム解像度を設定できます。

一般的に使用されるブレークポイントは、ブートストラップが使用するもの（991px（タブレット）および767px（モバイル））である可能性があります。それは必ずしもあなたのウェブサイトで使用することが理にかなっているわけではありません。

Answer 2

最初のもの：@mediaがあなたのCSSをカプセル化しています。つまり、もしあなたがそれを使わなければ、あなたのCSSは上書きされない限りグローバルになります。

これで、複数の@mediaクエリを使用できるようになりました。そうすれば、異なるデバイスでサイトを見栄えよくすることができます。 がうまく設計されるはずですが、100 px変更ごとに@mediaを書く必要はありません。

あなたが特定のニーズを持っていない場合は、Twitterのブートストラップのパターンに従うことができます。

/* Large Devices, Wide Screens */ 
@media only screen and (max-width : 1200px) { } 
/* Medium Devices, Desktops */ 
@media only screen and (max-width : 992px) { } 
/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px) { } 
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { } 
/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { } 

Answer 3

は、私は100個のメディアクエリを追加することを計画しておりません。ウィンドウ枠に非常に近い2行のiframeがあり、少し小さくすると見栄えが悪くなります。私はサイトを悪く見えるように少なくとも600ピクセル小さくする必要があります。 おそらく2つのメディアクエリしか使用しません。たぶん3、しかし私はそれを疑う。

Answer 4

@mediaクエリはレスポンシブデザインのレシピの1/3です。最も簡単な形式では、デバイスに応じて、またメディアクエリー基準に一致するかどうかに応じて、指定されたCSSを適用できるようにすることが重要な要素です。

すべての人気のブレークポイントは、私がここに置か

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

/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { /* Styles */ } 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { /* Styles */ }