CSS3の新機能まとめ（メディアクエリ）_html/css_WEB-ITnose

CSS3 メディア クエリは CSS2 メディア タイプの拡張および改良です。

CSS2 メディア タイプは一部のデバイス キーワードのみを定義しますが、CSS3 メディア クエリは幅、高さ、色などの値の範囲をさらに拡張します。メディア クエリとメディア タイプの違いは、メディア クエリは値または値の範囲であるのに対し、メディア タイプはデバイスの単なる一致です (つまり、メディア タイプは単語であり、メディア クエリの後には値が続く必要があります)。 2 つを混合できます);

media は、リンク タグ属性 [media]

  <link rel="stylesheet" type="text/css" href="../css/print.css" media="print and (max-width : 600px)" />

および CSS ファイルで使用できます。

使用可能な演算子と一般的に使用されるメディア タイプを紹介します。 And メディア クエリ:

operator:

and:

and 演算子は、シンボルの両側のルールが条件を満たすかどうかを照合するために使用されます

@media screen and (max-width : 600px) {/*匹配宽度小于600px的电脑屏幕*/}

not:

not 演算子は、 negate, all are not満足 このルールはすべて一致します

@media not print {/*匹配除了打印机以外的所有设备*/}

notを使用する場合、括弧を追加しないと、いくつかの奇妙な現象が発生する可能性があることに注意してください。 例:

@media not all and (max-width : 500px) {}/*等价于*/@media not (all and (max-width : 500px)) {}/*而不是*/@media (not all) and (max-width : 500px) {}

したがって、使用したい場合は、そうではありません。比較のために明示的に括弧を追加する必要があります。明確にしてください

, (カンマ):

は、両側のいずれかが満たされる場合に一致するために使用される or と同等です

@media screen , (min-width : 800px) {/*匹配电脑屏幕或者宽度大于800px的设备*/}

メディア タイプ (のみ)よく使用されるものをいくつか挙げ、残りについてはリンクを示します):

All:

all はすべてのデバイスに一致するデフォルト値です。

印刷:

プリンターに一致します (印刷プレビュー時にも一致します) [私の履歴書は印刷用に特別に作られています~]

他のメディアタイプに興味がある場合は、通常、これらの 3 つのタイプがよく使用されます。 、W3School の手順または W3 のドキュメントを読むことができます

Media Query (一般的に使用されるものもあります): //注意が必要です。はい、Media Query は括弧を追加する必要があります

max- width(max-height):

@media all {/*可以过滤不支持media的浏览器*/}

min-width(min-height):

@media (max-width : 600px) {/*匹配界面宽度小于600px的设备*/}

max-device-width (max-device-height):

@media (min-width : 400px) {/*匹配界面宽度大于400px的设备*/}

min-device-width( min-device-height):

うーん開発中に予想される効果に近づきます

すべてのメディア クエリ属性値へのリンクは W3 ドキュメントに記載されています。MDN を参照することもできます。MDN メディア クエリ ドキュメントを中国語化したボランティアがいます

メディアはネストできます:

@media (max-device-width : 800px) {/*匹配设备(不是界面)宽度小于800px的设备*/}

これにより、2 回印刷されない書き込みの冗長性が節約されます。ブラウザによっては、サーバーがメディア タイプのみをサポートし、メディア クエリをサポートしない場合があるため、一定の利点があります。なぜ私が知っているのか、私は困っています)

メディア クエリ (上記のもののみ) の値の単位は、px em rem (%/vh/ vw/vmin/vmax は試していません。無駄な気がします...);

メディアクエリはレスポンシブページの核心であり、実際には、レスポンシブページは異なる解像度で異なる効果を表示します;

レスポンシブページのCSSを書くとき、それは大規模なものと小さなものに分けられます。大から小 (サイズ);

小さいサイズから始めて max-series を使用してメディア クエリを作成することを強くお勧めします。また、大きいサイズの場合はその逆を行うことを強くお勧めします。

この記事のどこに誤りがあるか、欠点があれば指摘してください;