ブートストラップ メディア クエリは何をしますか?

Bootstrap では、メディア クエリにより、画面サイズによって使用されるデバイスを区別し、さまざまなスタイルを設定できます。さまざまな条件下でさまざまなスタイルを使用して、さまざまな端末デバイスでページのさまざまなレンダリングを実現できます。

このチュートリアルの動作環境: Windows 7 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

ブートストラップ メディア クエリの特徴画面のサイズ 使用デバイス

• 追加の小型デバイス (電話、768 ピクセル未満)

• 小型デバイス (タブレット、768 ピクセル以上)

• 中型デバイス (デスクトップ コンピューター、992 ピクセルから)

• 大型デバイス (大型デスクトップ コンピューター、1200 ピクセルから)

メディア クエリでは、さまざまな条件下でさまざまなスタイルを使用できるため、さまざまな端末デバイスでページがさまざまなレンダリング効果を実現できます。以前、Media Query がプロジェクト内でどのように参照されるかを簡単に紹介しましたが、メディア クエリには独自の使用ルールがあります。具体的には、メディア クエリの使用方法を説明します。

@media 媒体类型and （媒体特性）{你的样式}

注: メディア クエリを使用する場合は、「@media」で開始し、次にメディア タイプ (デバイス タイプとも呼ばれます) を指定し、続いてメディア特性 (デバイス特性とも呼ばれます) を指定する必要があります。 。メディアプロパティの記述方法はスタイルの記述方法とよく似ており、主に2つの部分に分かれており、最初の部分はメディアプロパティを参照し、2番目の部分はメディアプロパティで指定された値であり、コロンは2 つの部分の間で使用されます。例:

(max-width: 480px)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1. 最大幅 max-width

「max-width」はメディア機能の中で最も一般的に使用される機能であり、メディア タイプが指定された幅以下の場合、スタイルが有効になります。例:

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上記は、画面が 480px 以下の場合、ページ内の広告ブロック (.ads) が非表示になることを意味します。

2. 最小幅 min-width

「min-width」は「max-width」の逆で、メディア タイプが指定された幅以上の場合、スタイルが有効になります。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上記は、画面が 900px 以上の場合、コンテナ「.wrapper」の幅は 980px であることを意味します。

3. 複数のメディア プロパティの使用

メディア クエリでは、キーワード「and」を使用して複数のメディア プロパティを組み合わせることができます。つまり、メディア クエリには 0 個以上の式を含めることができ、式には 0 個以上のキーワードとメディア タイプを含めることができます。

画面が600px~900pxの場合、本体の背景色は以下のように「#f5f5f5」で描画されます。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4. デバイス画面の出力幅 デバイス幅

iPhone、iPad などのスマート デバイスでは、対応する幅を設定することもできます。画面デバイスのサイズに応じて style (または対応するスタイル ファイルを呼び出します)。同様に、画面デバイスの場合は、「min-device-width」や「max-device-width」など、「min/max」に対応するパラメーターを使用することもできます。

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

上記のコードは、iPhone のディスプレイなど、デバイスの最大幅 480 ピクセルに適した「iphone.css」スタイルを参照しています。ここでの「max-device-width」は、実際のデバイスの幅 解像度、視覚領域の解像度を指します。

5. Not キーワード

キーワード「not」を使用すると、特定の指定されたメディア タイプを除外する、つまり、式に一致するデバイスを除外するために使用されます。つまり、not キーワードは、次のような式に対して反転操作を実行することを意味します。

@media not print and (max-width: 1200px){样式代码}

上記のコードは、スタイル コードが、印刷デバイスとデバイス幅が より小さいデバイスを除くすべてのデバイスで使用されることを示しています。 1200px真ん中。

6. 唯一のキーワード

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

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

メディア タイプがメディア クエリで明示的に指定されていない場合、デフォルトは次のような all になります。

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

さらに、スタイルでは複数のステートメントを使用することもできます。同じスタイルを変更します。次のように指定された、さまざまなメディア タイプとメディア特性に適用されます。

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上記のコードの style.css スタイルは、幅が 480 ピクセル以下のハンドヘルド デバイス、または画面幅が 960 ピクセル以上のデバイスで使用されます。

これまでのところ、CSS3 メディア クエリは多くのブラウザでサポートされており、IE6 ～ 8 ブラウザを除くすべての最新のブラウザで完全にサポートされています。もう 1 つの違いは、他の CSS3 プロパティのように、メディア クエリに別のブラウザーでプレフィックスを付ける必要がないことです。

[関連する推奨事項:「ブートストラップ チュートリアル」]

以上がブートストラップ メディア クエリは何をしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。