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

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

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

1. メタについて

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

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

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

パラメータの説明:

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. メディア クエリの実装方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 屏幕尺寸大于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 レスポンシブ レイアウトのメディア クエリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。