CSS3のメディアクエリ Media Query_html/css_WEB-ITnose

メディアクエリはメディアクエリに関連するCSS3のプロパティで、メディアクエリを実行し、異なるメディアごとに異なるスタイルを記述することができます。伝説的な Web レスポンシブ レイアウトを何のプレッシャーもなく作成できます。 CSS3 メディア クエリの関連知識を見てみましょう。

1. Media Queryの導入方法

1. 外部参照

2. @media

@media screen{ 属性: 属性値

3. xml で導入

4. @import による導入

@import url("css/print.css") print;

2. Media Query の値

3. Media Query の互換性

4. Media Query の例

width Max width??または以下の場合の画面600px に等しい場合、small.css スタイルは Web ページのレンダリングに使用されます

2. 最小幅 Min width ?? 画面が 900px 以上の場合、Web ページのレンダリングに big.css スタイルが使用されます

3. 複数のメディア クエリ??画面が 600px ～ 900px の場合、style.css スタイルを使用して Web ページをレンダリングします

4. デバイス画面の出力幅 Device width??iphone.css スタイルは最大デバイスに適していますここでの max-device-width は、デバイスの実際の解像度を指します。これは、表示領域の解像度を意味します

5. iPhone4

6. iPad?? .css を縦向きモードでレンダリングします。ページを横向きでレンダリングするには、landscape.css を使用します

7. Android

link

8. キーワードではありません?? 特定の指定されたメディア タイプを除外します

9 、のみキーワード

Only は特定のメディア タイプを定義するために使用され、メディア クエリをサポートしていないブラウザを除外するために使用できます。実際、only は、メディア クエリをサポートしていないがメディア タイプをサポートしているデバイスのスタイル シートを非表示にするためによく使用されます。主なものは次のとおりです。メディア クエリをサポートするデバイスの場合、スタイルが通常どおり呼び出されると、スタイルは存在しないものとして扱われます。メディア クエリはサポートしないがメディア タイプをサポートするデバイスの場合、スタイルは読み取られません。また、画面ではなく読み取り専用であるため、メディア クエリをサポートしていないブラウザは、のみをサポートしているかどうかに関係なく、このスタイルを使用しません。

10. comma??style.css スタイルは、幅が 480px 以下のハンドヘルド デバイス、または画面幅が 960px 以上のデバイスで使用されます

11 . 画面のズームを無効にする

モバイル ブラウザでは、ビューポート メタ タグに user-scalable=no を追加することでズームを無効にできます。ズーム機能を無効にすると、ユーザーは画面をスクロールすることしかできなくなり、Web サイトがよりネイティブ アプリケーションのように見えます。この方法はすべての Web サイトに推奨されるわけではないことに注意してください。それは依然として独自の状況によって異なります。

CSS3 プロパティ。