css@media認識

css 2の@media

css 2では@mediaプロパティがサポートされていますが.しかし実現できる機能は比較的少なく、一般的には印刷時に特殊定義のCSSを作るだけである.構文:@media sMedia{sRules}説明:sMedia:デバイス名を指定します.付録:デバイスタイプsRules:スタイルシート指定スタイルシートルール指定のデバイスタイプを定義します.linkオブジェクトのmediaプロパティ(プロパティ)を参照してください.
デモの例:
1
2
3
4
5
6
7
8
9 // @media  screen { BODY { font-size : 12pt ; } } // @media  print { @import  "print.css" BODY { font-size : 8pt ;} }

css 3の@media

@media属性はCSS 3でmedia queries(メディアクエリー/マッチング)に進化し、CSS 3では.クエリー文を使用して、さまざまなタイプの画面をマッチングできます.構文:@media:{sRules}値:
1
2 <sMedia>： 。 {sRules}： 。
説明:メディア(オブジェクト)タイプを推定して異なるプレゼンテーションを実現します.この特性により、CSSは、異なるメディアタイプ、同一メディアの異なる条件(解像度、色数など)により正確に作用することができる.
01
02
03
04
05
06
07
08
09
10
11
12
13 media_query: [only | not]?  [ and  ]* expression: (  [: ]? ) media_type:  all |  aural |  braille |  handheld |  print |  projection |  screen |  tty |  tv |  embossed media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid
解析media_Query:メディアクエリー条件.only not andというプログラムによく現れる論理的推定が含まれている.expression:式.メディアフィーチャーが一致するかどうか.media_type:メディアの種類.
非常に多く含まれています.media_feature:メディアの特徴.よく使われるのはmin-width max-widthの最小最大幅の推定です.
DEMO(ChromeまたはFIREFOXで開くことを推奨します.開いたら、ショートカットキー「CTRL」+、「CTRL」+」-)を押してページをスケールします):

CSSコード

1
2
3
4
5 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 */

HTMLコード

1
2
3
4
5
6 < p > ， / 。 ：</ p > < p >/* 500px-800px + 100px-400px */</ p > < p >/* 500px */</ p > < p >/* 800px */</ p > < p >/* 100px */</ p > < p >/* 400px */</ p >