CSS属性のメディアタイプの詳細な紹介

前書き:

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

メディア属性の宣言は、@import または @media を使用して導入できます:

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

ドキュメント タグでメディアを導入することもできます:

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

(推奨チュートリアル: CSS チュートリアル)

@import と @media の違いは、前者ではメディア タイプの外部スタイル シートが導入されるのに対し、後者ではメディア属性が直接導入されることであることがわかります。

@import を使用する方法は、@import にスタイルシート ファイルの URL アドレスを追加し、その後メディア タイプを追加します。スタイル シートは複数のメディアで共有でき、メディア タイプは "," で区切られます。 " 区切り文字。 @media の使用法はメディア タイプを最初に置き、その他のルールは基本的にルールセットと同じです。

さまざまなメディアの種類を以下に示します。

SCREEN: コンピュータの画面を指します。

PRINT: プリンターに使用される不透明なメディアを指します。

PROJECTION: 表示に使用されるプロジェクトを指します。

BRAILLE: 点字システム。触覚効果のある印刷物を指します。

AURAL: 音声電子シンセサイザーを指します。

TV: テレビタイプのメディアを指します。

HANDHELD: ハンドヘルド表示デバイス (小画面、モノクロ) を指します。

ALL: すべてのメディアに適しています。

モバイル端末 (モバイル端末) アダプティブ スタイルの使用 @media

ユニバーサルモバイル端末スタイル:

@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}

モバイル端末の高さの指定スタイル:

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的设备}

スタイル異なるデバイスに応じて設定:

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

順番に注意 以下に @media (min-width: 768px) と書くと、css ファイルが上から下に読み込まれるため、非常に悲惨なことになります。はい、後続のCSSの優先度が高くなります

@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

1440の場合、1440>768であるため、1200は無効になります。

したがって、min-width を使用すると、小さいものは上に、大きいものは下に配置されます。同様に、max-width を使用すると、大きいものは上に、小さいものは下に配置されます。

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

関連ビデオチュートリアルの推奨事項: css ビデオ チュートリアル

以上がCSS属性のメディアタイプの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。