CSS3 で @media を使用して Web ページの適応を実現するためのサンプル コード

現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバイス端末の解像度はそれほど高くすることはできません。ますます多くの Web サイトが、ページをさまざまな解像度に適応させ始めており、基本的なコンテンツを低い解像度で表示し、すべての機能を高い解像度で表示し、さらには複数のレベルで複数のバージョンを表示しています。

1. CSS2 の @media

CSS2 は @media 属性をサポートしていますが、実装できる機能は限られており、通常は印刷用の特別な CSS を定義するためにのみ使用されます。

@media sMedia { sRules }

1.1 例

// ディスプレイのフォントサイズを設定します @media screen {
本文 {フォントサイズ:12pt; }
}
// プリンタのフォントサイズを設定します @media print {
@import "print.css"
本文 {フォントサイズ:8pt;}
}

2. CSS3 の @media

@media 属性は、CSS3 では一種のmedia queriesに進化しました。CSS3 では、クエリ ステートメントを使用してさまざまな種類の画面を一致させることができます。

文法：

@media mediatype and|not|only (メディア機能) {
CSS-sルール;
}

1. mediatype メディアタイプ: すべて、印刷 (プリンター)、画面 (コンピューター画面、携帯電話など)、音声 (スクリーンリーダーやその他のデバイス)
2. media_query および | not | メディアクエリ条件操作のみ
3. media_feature 最大幅や最小幅などのメディア機能。

さまざまな表示を実現するために、メディア (オブジェクト) タイプを決定します。この機能により、CSS はさまざまなメディア タイプに対してより正確に動作できるようになります。

2.1 例

body{background:blue;}/*幅500px〜800px、高さ100px〜400px、青*/
@media screen and (max-width:500px){body{background:green;}}/*幅が500px未満の場合は緑*/
@media screen and (min-width:800px){body{background:red;}}/*幅が800pxより大きい場合は赤*/
@media screen and (max-height:100px){body{background:yellow;}}/*高さが100px未満の場合は黄色*/
@media screen and (min-height:400px){body{background:pink;}}/*高さが400pxを超える場合はピンク*/

2.2 メディアの特性

要約する

これで、CSS3 の @media を使用して Web ページを適応させる方法についての説明は終わりです。CSS3 メディア Web ページ適応に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。