css3 でのメディア クエリの使用方法の詳細な説明:
現在、固定幅の Web サイトは徐々にレスポンシブ デザインに置き換えられており、これは避けられない傾向です。
いわゆるレスポンシブデザインとは、どのような画面やデバイスが使用されてもページが適切に表示されることを意味します（ページの表示スタイルはデバイスによって異なる場合があります）。
レスポンシブ デザインは、さまざまな仕様や形状のデバイスによってプログラマーに課せられる課題を解決し、従来のコンピューター、携帯電話、タブレットのいずれでも Web ページを通常どおり表示できるようにします。
メディアクエリテクノロジーを通じて、レスポンシブデザインをうまく実現できます。以下にメディアクエリを紹介します。
1. CSS2 のメディア クエリ:
実際、css2 にはメディア クエリ アプリケーションがありますが、それらは比較的単純です。次のコードを参照してください:
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
上記のコードは、モニターとすべての種類のデバイスに対してそれぞれ 3 つの CSS ファイルを規定しています。そしてプリンター。
2. メディアクエリの使い方:
メディアクエリの使い方はたくさんありますが、基本的にCSSの使い方に適したものを以下に挙げます:
リンクメソッドで紹介:
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
xmlメソッドで紹介:
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
@導入された import メソッド:
@import url("css/reset.css") screen; CSS コードで使用:
@media screen{
选择器{
属性：属性值；
}
} スタイル タグで使用:
<style type="text/css" media="screen">
/*code*/
</style>
3. メディア クエリのルール:
css2 のメディア クエリは非常に単純で、メディア タイプのみを区別できます。
CSS3 はメディア クエリを拡張しました。これは、メディアの種類に基づくだけでなく、メディアの関連属性にも基づくことができます。
次のコード例を見てください:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="softwhy.css" />
ページ幅が 600px 以下で画面に適用されると、softwhy.,css が呼び出されます。クエリ ルール:
メディア タイプと、その後に特定の条件 (最小画面幅など) をチェックする 1 つ以上の式が含まれます。
メディア属性メソッドと@mediaメソッドなど、使用方法が異なり、メディアクエリの定義方法も異なりますが、ルールは同じです。
(1). 簡単なコード:
@media all and (min-width:800px) {
/*code*/
} 最小水平画面幅 800 ピクセルのすべての画面は、対応する CSS コードを使用します。
特記事項: メディア タイプが all の場合、all は省略でき、and after all も省略できます。 短縮コードは次のとおりです:
@media (min-width:800px) {
/*code*/
} (2)。複雑なクエリ コード:
@media (min-width:800px) and (max-width:1200px) {
/*code*/
} (3)。 . and キー 単語:
and は、条件が同時に満たされる必要があることを指定するために使用されます。 コードは次のとおりです:
@media screen (min-width:800px) and (max-width:1200px) {
/*code*/
} 画面が 800px 以上 1200px 以下の場合、対応する CSS コードが使用されます。
(4).or キーワード:
or は、1 つの条件が満たされる限り、コードは次のように指定するために使用されます:
@media screen (min-width:800px) or (orientation:portrait) {
/*code*/
} 画面サイズが 800px にほぼ等しいか、向きが縦の場合、対応するcssコードが使用されます。
(5).notキーワード:
notは、指定した条件を満たさない場合に成立することを指定するために使用します。
@media not print{
/*code*/
}プリンターデバイスではない場合は、対応するCSSコードを使用してください。
次のセクション