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()を使用した際にページが応答しなくなる問題の解決記録について

推薦する

Vue3でカルーセルコンポーネントをカプセル化する方法

目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。一般的な...

マーキー要素は、スクロールするフォントや画像などの効果を実装します。

マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。コードを...

仮想マシンUbuntu 16.04がインターネットに接続できない問題の解決策

Ubuntu をインストールしたばかりですが、開いたときにネットワーク接続がありませんでした。右上隅...

Vueはマーキースタイルのテキストの水平スクロールを実装します

この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...

MySQLで日付と時刻を照会する方法

序文:プロジェクト開発では、一部のビジネス テーブル フィールドで日付と時刻の型が使用されることが多...

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...

doctype のマークアップ検証

しかし最近、この方法を使用すると問題が発生することがわかりました。コードを参照してください。コードを...

Linux での screen コマンドの使用方法の詳細な説明

GUNスクリーン:公式サイト: http://www.gnu.org/software/screen...

MySQL テーブル結合クエリでグループ化と重複排除を実装する例

目次ビジネスロジックデータテーブル構造クエリロジックSQL スクリプトスクリプトの説明ビジネスロジッ...

Nginx における accept lock の仕組みと実装の詳細な説明

序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...

MySQL 8.0 のタイムゾーン問題を解決する手順

ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.16-wi...

ボタンの 4 つのクリック応答方法の概要

ボタンは頻繁に使用されます。ここでは、イベント処理メソッドを整理し、実装方法が多数あることを発見しま...

Red Hat Enterprise Linux 8 をベースにした CentOS 8 が正式にリリースされました

CentOS プロジェクトは、Red Hat の再配布要件に完全に準拠した、Red Hat Ente...