CSS レスポンシブ レイアウトのメディア クエリ

実際のプロジェクトでは、レスポンシブ レイアウトの問題が常に発生します。レスポンシブ UI フレームワークを使用したことがない場合は、通常、メディア クエリを使用してレスポンシブ レイアウトを実装します。頻繁に遭遇するので、少し要約する必要があると思います。

最初に理解する必要があるのは、メディア クエリを使用する場合、ブラウザのサイズがリセットされると、ブラウザの幅と高さに応じてページが再レンダリングされるということです。

1. メタについて

メディア クエリを使用する前に、モバイル デバイスの表示効果と互換性を持たせるために 設定を使用する必要があります。簡単に理解しましょう HTML の タグについて話しましょう。

このタグは通常、head タグ内に配置され、説明、検索エンジンのキーワード、更新頻度など、HTML 要素に関するメタ情報 (メタ情報) を提供するために使用されます。

メディア クエリの設定は次のとおりです:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

パラメータの説明:

1. name 属性は、名前と値のペアで名前を提供します。 name="viewport" はビューポートに加えてウィンドウの設定を意味します。

2. content 属性は、名前と値のペアの値を提供します。値は任意の有効な文字列にすることができ、コンテンツはコンテンツに基づきます。常に http-equiv または name と一緒に使用する必要があります。属性を使用して、それに関連付けられた値の定義を提供します。コンテンツ値の説明:

width = device-width: 幅は現在のデバイスの幅に等しい;

initial-scale: 初期スケーリング (デフォルト設定は 1.0);

minimum-scale: ユーザーがズームできる最小比率 (デフォルト設定は 1.0);

maximum-scale: ユーザーがズームできる最大比率 (デフォルト設定は 1.0);

user -scalable: ユーザーが手動でズームできるかどうか (ユーザーにページをズームインおよびズームアウトさせたくないため、デフォルトは no)。

についてさらに詳しく理解するには、次を参照してください: http://www.w3school.com.cn/tags/tag_meta.asp

#2. メディア クエリの実装方法

1. リンク内のデバイスのサイズを直接決定し、さまざまな外部 CSS ファイルを参照します。例:

<link type="text/css" href="media_1.css" media="screen and (min-width: px)">

画面が 400px より大きい場合、外部 CSS スタイル ファイル media_1.css が参照されます。

2. CSS スタイルを設定する場合は、その直後に @media を設定します。例:

.div1{
    width: 400px;
    height: 400px;
}
/*当屏幕大于1440px的彩色屏幕样式*/
@media screen and (min-width: 1440px){
    .div1{
        width: 800px;
        height:800px;
    }
}

これは CSS3 を使用して実装されたメディア クエリです。実際、メディア クエリは本質的にスタイル オーバーレイです。

3. CSS3 メディア クエリ

1. 基本構文

@media  媒体类型  关键字 and (媒体功能) {
        /* CSS 样式 */
    }

2. キーワード

のみ: 特定のメディア タイプを指定します。メディアクエリをサポートしていないブラウザ。

not: 指定されたメディア タイプを除外します。

キーワードの使用は、メディア機能はサポートしないがメディア タイプをサポートするデバイスによく使用されます

3. メディア タイプ

メディア タイプは、デバイスの一般的な説明を示します。カテゴリ、メディア タイプはオプションであり、not または Only キーワードが使用されない限り、暗黙的に all タイプが使用されます。

#値すべてprint#screenspeechすべてのブラウザは値「screen」、「print」、および「print」をサポートしています。 「すべて」のメディア属性。

説明
すべてのマルチメディア タイプのデバイス向け
プリンタの場合
コンピュータの画面、タブレット、スマートフォンなどの場合。
スクリーン リーダーの場合

4. 一般的に使用されるメディア関数

以下は、わずかに一般的に使用される可能性のあるいくつかのメディア関数のみをリストしたものです:

height は、画像の表示領域の高さを定義します。出力デバイスのページ。

width は、出力デバイスのページの表示領域の幅を定義します。

max-height は、出力デバイス内のページの最大表示領域の高さを定義します。

max-width は、出力デバイス内のページの最大表示領域幅を定義します。

min-height は、出力デバイス内のページの最小表示領域の高さを定義します。

min-width は、出力デバイス内のページの最小表示領域幅を定義します。

device-height は、出力デバイスの画面の表示高さを定義します。

device-width は、出力デバイスの画面の表示幅を定義します。

max-device-height 出力デバイスの画面に表示される最大の高さを定義します。

max-device-width は、出力デバイスの画面の最大表示幅を定義します。

orientation デバイスが現在横向きか縦向きかを検出します。

4. 実際の一般的なサイズの設定

以下には一般的な画面サイズの一部のみをリストしますが、「より大きい」、「より小さい」、および「等しい」の設定も実装されています。

    /* 屏幕尺寸大于960px时（普通彩色屏幕） */
    @media only screen and (min-width:960px){ }
    /* 屏幕尺寸小于1440px时 */
    @media only screen and (max-width:1440px){ }
    /* 屏幕尺寸大于960px而小于1920px */
    @media only screen  (min-width: 960px) and (max-width: 1920px){ }
    /* 屏幕大于2000px时（MAC) */
    @media only screen and (min-width:2000px){ }
    /*  当设备可视宽度小于480px (iphone)*/
    @media only screen and (max-device-width:480px){ }
    /* 当设备可视宽度等于768px时 (iPad) */
    @media only screen and (device-width:768px){ }
    /* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }
    /* 屏幕尺寸大于481px而小于1024px (iPad横屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { }

注: CSS のスタイル カバレッジの問題により、実際の設定時に同じ要素を複数の異なるサイズに設定する必要がある場合は、次のような順序の問題に注意する必要があります。 : min- 幅に関しては、小さいものが上に、大きいものが下に配置されます。同様に、max-width を使用する場合は、大きいものが上に、小さいものが下に配置されます。

推奨チュートリアル: 「

CSS チュートリアル

」

以上がCSS レスポンシブ レイアウトのメディア クエリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。