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

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 デバイス}

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

<<:  選択ドロップダウンメニューのテキストを左右にスクロールするように設定する

>>:  Reactでwindow.print()を使用した際にページが応答しなくなる問題の解決記録について

推薦する

Tomcat で JNDI データ ソースを構成する 3 つの方法

これまでの仕事では、開発サーバーは一般的にTomcatでした。データソースは、多くの場合、appli...

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

CSS で 3D ブック効果を実装するためのサンプル コード

さっそく、レンダリングを見てみましょうソースコードは以下のとおりです <!DOCTYPE ht...

Vueはコードのハイライトを実現するためにモナコを使用しています

Vue 言語と要素コンポーネントを使用して、コード コンテンツの入力を必要とし、ハイライト表示が可能...

nginx アンチホットリンクおよびアンチクローラー設定の詳細な説明

新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...

JQuery を放棄すべきでしょうか?

目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...

MySQLのunion allとunionの違いを簡単に理解する

Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...

DevUI で独自の Angular コンポーネント ライブラリを構築する方法

目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...

Vueの使用に関する深い理解

目次Vueのコアコンセプトを理解するVueの双方向バインディングの原理と実装を探るVue 双方向バイ...

チェックボックスの選択またはキャンセルを実装するJavaScript

この記事では、すべてのチェックボックスを選択または解除するためのJavaScriptの具体的なコード...

Vue で eslint 検出をオフにする方法 (複数の方法)

目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...

Dockerfileの指示と基本構造の説明

Dockerfile を使用すると、ユーザーはカスタム イメージを作成できます。基本構造Docker...

ECMAScript の演算子を理解するための記事

目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...

MySQL マルチインスタンス構成のアプリケーションシナリオ

目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...

Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル

Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...