CSS3 シリーズ 4 (メディア クエリ モバイル デバイス スタイル)_html/css_WEB-ITnose

ビューポート設定はモバイルデバイスの画面サイズに適応します

ビューポート: 開発者が仮想ウィンドウを作成し、そのウィンドウのサイズやズーム機能をカスタマイズできるようにします

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

コード内の content 属性は、以下の 6 つの異なるパラメータ

メディア クエリの仕組み

1. 現在の画面の表示領域を定義する最大幅は 600 ピクセルです

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

では、small.css はどのように記述されているのでしょうか?

2. 現在の画面の表示領域を定義します。幅と長さは 600 ピクセルから 900 ピクセルの間です。モバイル デバイスがランドスケープ モードにある場合は、ランドスケープ スタイルを適用します。 "@media" で始まります

2. media_query は、and だけではなく、定義されたクエリキーを表します

次のスタイル式に対して否定演算を実行することを意味しません

メディアクエリをサポートしていないデバイスのみを許可しますが、 Media Type タイプを読み取ることができるブラウザは、このスタイルを無視します。Media For Queries モバイル デバイスをサポートするブラウザの場合、唯一のキーワードが存在する場合、モバイル デバイスのブラウザはその唯一のキーワードを無視し、ページ上の式に従ってスタイル ファイルを直接適用します。

3. media_type はデバイス タイプ (メディア タイプとも呼ばれます) を指定します

4 、media_feature は CSS でデバイス機能を定義します

media_type デバイス タイプ リスト

media_feature デバイス機能リスト

ほとんどのデバイス機能は最小値/最大値を受け入れることができます接頭語