CSS チュートリアル: CSS 属性メディア タイプ

スタイルシートの最も重要な機能の 1 つは、ページ、画面、電子シンセサイザーなどの複数のメディアに適用できることです。特定のプロパティは特定のメディアにのみ適用されます。たとえば、「font-size」プロパティはスクロール可能なメディア タイプ (画面) にのみ適用されます。

メディア属性を宣言するには、@import または @media を使用できます。

@import url(loudvoice.css) スピーチ;
@media 印刷 {
/* 印刷用のスタイルシートをここに記述します */
}

ドキュメントのマークアップにメディアを含めることもできます。
<link rel="スタイルシート" type="text/css" media="print" href="foo.css">
ご覧のとおり、@import と @media の違いは、前者はメディア タイプの外部スタイル シートをインポートするのに対し、後者はメディア属性を直接インポートすることです。 @import の使用方法は、@import にスタイルシート ファイルの URL アドレスとメディア タイプを続けて指定します。複数のメディアで 1 つのスタイルシートを共有でき、メディア タイプは "," 区切り文字で区切られます。 @media の使用方法は、メディア タイプを最初に置くことであり、その他のルールは基本的にルール セットと同じです。さまざまなメディア タイプを以下に示します。

SCREEN: コンピュータの画面を指します。
印刷: プリンターで使用される不透明なメディアを指します。
PROJECTION: 表示するプロジェクトを指します。
点字: 触覚効果のある印刷物を指す点字システム。
AURAL: 電子音声合成装置を指します。
TV: テレビ型メディアを指します。
ハンドヘルド: ハンドヘルドディスプレイデバイス（小型画面、モノクロ）を指します。
ALL: すべてのメディアに適用されます。

モバイルフレンドリーな@mediaスタイルの使用

一般的な携帯電話のスタイル:

@media all および (orientation : 縦向き) {
/*縦画面*/
}
@media all および (orientation : landscape) {
/*横画面*/
}

携帯電話の高さのスタイルを指定します:

@media スクリーンと (最大幅: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) 720 <= xxx < 960 のデバイス}

さまざまなデバイスに応じて設定されるスタイル:

@media (最小幅: 768px) { //> = 768 台のデバイス}
@media (最小幅: 992px) { //> = 992 台のデバイス}
@media (最小幅: 1200) { //> = 1200 デバイス}

順番に注意してください。下に @media (min-width: 768px) と書くと悲劇になります。CSS ファイルは上から下に読み込まれるため、後の CSS の方が優先されるからです。

@media (最小幅: 1200) { //> = 1200 デバイス}
@media (最小幅: 992px) { //> = 992 台のデバイス}
@media (最小幅: 768px) { //> = 768 台のデバイス}

なぜなら、1440 の場合、1440>768 なので、1200 は無効になります。

したがって、min-width を使用すると、小さい方が上に、大きい方が下になります。同様に、max-width を使用すると、大きい方が上に、小さい方が下になります。

@media (最大幅: 1199){ //<=1199 デバイス}
@media (最大幅: 991px){ //<=991 デバイス}
@media (最大幅: 767px){ //<=768 デバイス}

この記事はここで終わります