深入了解CSS3媒體

css3 媒體 Media Type 媒體類型 媒體類型是CSS2中一個非常有用的屬性。透過媒體類型可以對不同的裝置指定不同的樣式。 W3C共列出十種媒體類型，如表：

#裝置類型 # #all 所有裝置 Braille 盲眼用盲法觸覺回饋裝置 Embossed 點字打字機 Handheld 便攜裝置 Print 列印用紙或列印預覽檢視 Projection 各種投影裝置 Screen 電腦顯示器 Speech

語音或音訊合成器 #TV 電視機型裝置

Tty 使用固定密度字母柵格的媒介，例如電傳打字機和終端機

其中screen，all，print為最常見的三種媒體類型。 媒體類型的參考方法

link方法 ：在 標籤引用樣式的時候引入媒體類型，透過media屬性指定不同的媒體類型。

xml方法 ：與link引入媒體類型類似，也是透過media屬性來指定。 @import方法 ： @import 是用來引用樣式檔案的方法之一，同樣可以用來引用型別。

@import 引入媒體類型主要有兩種方式。 一種是在樣式檔案中透過

@import 呼叫另一個檔案；

@import url(style.css) screen; 另一種是在標籤 中引入。 @import url(style.css) screen;

@media方法 ： @media 是CSS3中新引進的特性，稱為媒體查詢。在頁面中可以透過這個屬性來引入媒體類型。與 @import

類似，也有兩種類型。 一種是在樣式檔案中透過 @media 引用媒體類型； @media screen{ 选择器{/*样式*/} } 另一種是在標籤 中引入。 @media screen{ 选择器{/*样式*/} } 以上四種方法都可以引用媒體類型，建議使用第一種與第四種。 Media Query媒體特性 媒體特性是CSS3對媒體類型的增強版。 W3C共列出13種CSS3中常用的特性，如表： 屬性 值 #Min/Max 描述 color 整數 #Yes 每個色彩的位元組數 color-index 整數 Yes .顏色表中的色彩數 device-aspect-ratio 整數/整數 Yes #寬高比例 device-height #Length Yes 裝置畫面的輸出高度 #device-width Length #Yes 裝置螢幕的輸出寬度 grid 整數 No 是否基於柵格的裝置 height Length Yes 渲染頁面的高度 ##monochrome 整數 Yes 單色幀緩衝器中每像素位元組 ##resolution 分辨率(dpi/dpcm) Yes 解析度 #scan Progressive interlaced #No Tv媒體類型的掃描方式 width #Length Yes######是渲染介面的寬度### #########orientation######portrait/landsscape######No######橫屏或垂直螢幕######################################################################################### Media Query使用方法 @media 媒体类型 and (媒体特性){/*样式*/} 使用Media Query时必须要使用 @media 开头，然后指定媒体类型，随后是指定媒体特性。

最大宽度 max-width

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

@media screen and (max-width:480px){ p{ width:400px; } } 意思是当屏幕小于或等于480px时，p的宽度被重置为400px。

最小宽度 min-width

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

@media screen and (min-width:900px){ p{width:900px;} } 当最小宽度等于或大于900px时，p的宽度重置为900px

多个媒体特性使用

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

@media screen and (min-width:400px) and (max-width:600px){ p{ background:red; } } 当屏幕宽度在400px~600px时，p的背景色变为红色。

设备屏幕的输出宽度 Device width

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

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

not 关键词

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

@media not print and (max-widht:1200px){/*样式*/} 样式代码将被使用在除了打印设备和屏幕宽度小于1200px的所有设备。

only 关键词

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

CSS3 媒体特性完。

	#裝置類型



# #all	所有裝置
Braille	盲眼用盲法觸覺回饋裝置
Embossed	點字打字機
Handheld	便攜裝置
Print	列印用紙或列印預覽檢視
Projection	各種投影裝置
Screen	電腦顯示器