css3メディアノート_html/css_WEB-ITnose

css3 メディア

Media Type メディア タイプ

W3C では、表に示すように、合計 10 個のメディア タイプがリストされています。

点字の触覚フィードバック視覚障害者用デバイス link メソッド

<link rel="stylesheet" type="text/css" href="style.css" media="screen">

エンボス加工	点字タイプライター
ハンドヘルドデバイス	ポータブルデバイス
印刷	印刷用紙または印刷プレビュービュー
映写	各種映写機材
スクリーン	コンピューターモニター
スピーチ	スピーチまたはオーディオシンセサイザー
TV	テレビタイプのデバイス
Tty	固定密度文字を使用するメディアテレタイプライターや端末などのグリッド
のうち最も一般的なメディア タイプは、them、screen、all、print の 3 つです。	メディア タイプ参照メソッド
	: 2cdf5bf648cf2f33323966d7f58a7f3f タグでスタイルを参照するときにメディア タイプを導入し、media 属性を通じてさまざまなメディア タイプを指定します。

xml メソッド

: リンクによって導入されるメディア タイプと同様に、これも media 属性を通じて指定されます。

<?xml-stylesheet type="text/css" media="screen" href="style.css">

1. @import メソッド: @import はスタイル ファイルを参照するために使用されるメソッドの 1 つであり、型の参照にも使用できます。 @import を使用してメディア タイプを導入するには、主に 2 つの方法があります。 1 つは、スタイル ファイル内の @import を通じて別のファイルを呼び出すことです。

   もう 1 つは、タグ c9ccee2e6ea535a969eb3f532ad9fe89 でそれを導入することです。

@import url(style.css) screen;

2. @media メソッド: @media は、CSS3 で新しく導入された機能で、メディア クエリと呼ばれます。この属性を通じてメディア タイプをページに導入できます。 @importと同様に2種類あります。

   1 つは、スタイル ファイル内の @media を通じてメディア タイプを参照することです。

<style>	@import url(style.css) screen;</style>

3. もう 1 つは、タグ c9ccee2e6ea535a969eb3f532ad9fe89 でメディア タイプを導入することです。

   @media screen{	选择器{/*样式*/}}

   上記の 4 つの方法はすべてメディア タイプを参照できます。1 番目と 4 番目の方法を使用することをお勧めします。
   Media Query メディア プロパティ
4. W3C では、次の表に示すように、CSS3 で一般的に使用される合計 13 個のプロパティをリストしています。それぞれのバイトcolor Number
   color-index
   integer

Yes

カラーテーブルの色の数

device-aspect-ratiointeger/integerYesアスペクト比 デバイス- 高さ長さはいデバイス画面の出力高さはいいいえはいはいはいいいえはいいいえ

Media Query使用方法

@media 媒体类型 and (媒体特性){/*样式*/}

　　使用Media Query时必须要使用@media开头，然后指定媒体类型，随后是指定媒体特性。

1. 最大宽度max-width

   max-width是媒体特性中最常用的一个特性，意思是指媒体类型小于或等于指定的宽度时，样式生效。

   @media screen and (max-width:480px){	div{		width:400px;	}}

   意思是当屏幕小于或等于480px时，div的宽度被重置为400px。

2. 最小宽度min-width

   min-width与max-width相反，即媒体类型大于或等于指定宽度时，样式生效。

   @media screen and (min-width:900px){	div{width:900px;}}

   当最小宽度等于或大于900px时，div的宽度重置为900px

3. 多个媒体特性使用

   Media Query可以使用关键词“and”将多个媒体特性结合在一起。

   @media screen and (min-width:400px) and (max-width:600px){	div{		background:red;	}}

   当屏幕宽度在400px~600px时，div的背景色变为红色。

4. 设备屏幕的输出宽度Device width

   还可以根据屏幕尺寸设置相应的样式

   <link rel="stylesheet" media="screen and (max-device-width:500px)" href="style.css" />

   样式适用于最大宽度为500px，这里的max-device-width所指的是实际分辨率，也就是指可视面积分辨率。

5. not关键词

   关键词not用来排除某种制定的媒体类型，也就是说对后面的表达式执行取反操作。

   @media not print and (max-widht:1200px){/*样式*/}

   样式代码将被使用在除了打印设备和屏幕宽度小于1200px的所有设备。

6. only关键词

   only用来指定某种特定的媒体类型，可以排除不支持媒体查询(Media Query)的浏览器。only很多时候是用来对不支持Media query却支持Media Type的设备隐藏样式表。因此支持媒体特性的设备正常调用样式，此时就当only不存在；不支持媒体特性但支持媒体类型的设备，就不会读取样式，因为先读取的是only而不是screen；不支持Media Query的浏览器，不论是否支持only，样式都不会被采用。

   <link rel="stylesheet" media="only screen and (max-device-width:1200px)" href="style.css">

		デバイス幅	長さ
デバイス画面の出力幅		グリッド	整数
ゲートグリッドデバイスに基づいていますか		高さ	長さ
レンダリングされたページの高さ		モノクロ	整数
モノクロフレームバッファーのピクセルあたりのバイト数		解像度	解像度 (dpi/dpcm)
解像度		スキャン	プログレッシブインターレース
TVメディアタイプスキャン方法		幅	長さ
レンダリングインターフェイス 幅		向き	ポートレート/ランドスケープ
横画面または縦画面