CSS メディア クエリを使用してレスポンシブ レイアウトを作成する_html/css_WEB-ITnose

現在、Web フロントエンドの分野では、BootStrap は最も人気のある UI ライブラリの 1 つであり、その 12 列のフェンス システムは、プログラマが操作しやすい応答性の高いレイアウトのモードを提供します。

Bootstrap の内部原理を調査すると、画面サイズ、解像度、デバイスの違いによって引き起こされるさまざまなシナリオで CSS スタイルの選択を完了するには、実際にはメディア クエリを通じて行われます。今日はメディアクエリのツールまたは方法について概要を説明します。

CSS バージョン 2 以降、メディア タイプを通じて CSS でメディア サポートを取得できます。

1. メディアクエリの使い方:

<link rel="stylesheet" type="text/css" href="site.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />

Css スタイルシートを紹介する上記 2 つの文には、一般的な Css 導入文よりもキーワード「メディア」が 1 つ多くあり、それぞれを指定するために使用することを media 属性で定義しています。メディア タイプのスタイル シート: コンピューターのカラー スクリーン用の

screen。

print は、印刷プレビュー モードで表示されるコンテンツ、またはプリンターで印刷されるコンテンツに適しています。

※ここではCssで導入した文の中にmedia属性を入れているので、以下のクエリ文ではscreenやprintを省略することができます。

2. 一般的なメディアクエリ構文:

@media “media type” condition {/*CSS样式表*/}

このうち、「@media」は別の方法で「media=」と書くこともできます

「メディアタイプ」はメディアクエリが適用されるメディアタイプです。すべてのメディアが次の CSS スタイル シートを使用することを意味する「all 」、または最小画面幅が 800px の場合に次の CSS スタイル シートが使用されることを意味する「(min-width:800px)」など、適用されます。画面幅が 800px を超えている場合は、この CSS を適用してください。

つまり、メディアクエリは、メディアタイプと、それに続く特定の条件（最小画面幅など）をチェックする1つ以上の式で構成されます。条件が true か false かを評価し、条件が true に変更された場合は CSS が適用され、そうでない場合は適用されません。

これから、多くのメディアクエリタイプを拡張できます。

3. CSS メディアクエリでは、「and」、「or」、「not」という 3 つの論理演算を使用できます。 もちろん、意味を説明する必要はありません。いくつかの例を見ると一目瞭然です:

/*在将某个媒体查询应用于所有媒体类型时，会省略 all*/@media (min-width:800px) { ... }/*宽度在800~1200px之间时激活*/@media (min-width:800px) and (max-width:1200px) { ... }/*可以使用多个and运算符，这里添加了第三个判断方向为纵向*/@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }/*宽度为800px或者方向为纵向时激活*/@media (min-width:800px) or (orientation:portrait) { ... }/*宽度不是800px时激活*/@media (not min-width:800px) { ... }

4. 幅と高さが非常に似ているので、この 2 つの条件を一緒に使用できます:

@media (min-width:800px) and (min-height:400px) { ... }

方向クエリ:

@media (orientation:portrait) { ... }

Without max-or min-query、もちろん、この種のクエリのユーザビリティはあまり高くありません:

@media (width:800px) and (height:400px) { ... }

5. 一般的なメディアクエリ

Apple がユーザーのスマートフォンやタブレットを初めて市場に投入したため、ほとんどの次のメディア クエリは、これらのモデルに基づくデバイスです。

横向きモードのスマートフォンをターゲットにする場合は、次を使用します: @media (min-width: 321px) { ... }

縦向きモードのスマートフォンをターゲットにする場合は、次を使用します: @media (max-width: 320px) { .. . }

ターゲットが横向きモードの Apple iPad の場合は、次を使用します: @media (orientation: landscape) { ... }

ターゲットが縦向きモードの iPad である場合は、次を使用します: @media (orientation: 縦向き) { .. }

iPad では方向メディア機能が使用され、Apple iPhone では幅が使用されていることに気づいたかもしれません。主な理由は、iPhone が方向メディア機能をサポートしていないためです。これらの方向のブレークポイントをシミュレートするには、幅を使用する必要があります。

6. ネストされたメディア クエリ:

#header {  width: 400px;  @media (min-width: 800px) {    width: 100%;  }}

上記のコードは次の結果にコンパイルされます:

#header {  width: 400px;}@media (min-width: 800px) {  #header {    width: 100%;  }}

上記はメディア クエリの概要を作成する例として幅を使用しています。内側。幅と高さは、メディア クエリを使用して制御できる 2 つの属性にすぎません。色、カラー インデックス (整数)、アスペクト比 (比率)、およびその他の属性も使用できます。