css3 媒體

Media Type 媒體類型

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

	#裝置類型



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

Speech

語音或音訊合成器

#TV
電視機型裝置
Tty
使用固定密度字母柵格的媒介，例如電傳打字機和終端機
　　其中screen，all，print為最常見的三種媒體類型。媒體類型的參考方法
link方法
：在<link>標籤引用樣式的時候引入媒體類型，透過media屬性指定不同的媒體類型。 <pre class="brush:php;toolbar:false"><link></pre>

xml方法
```
<?xml-stylesheet  type="text/css" media="screen" href="style.css">
```
@import方法：@import是用來引用樣式檔案的方法之一，同樣可以用來引用型別。
@import
引入媒體類型主要有兩種方式。一種是在樣式檔案中透過
@import
呼叫另一個檔案；
```
@import url(style.css) screen;
```

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

@media方法

：

@media

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

類似，也有兩種類型。一種是在樣式檔案中透過@media

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

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

以上四種方法都可以引用媒體類型，建議使用第一種與第四種。　　W3C共列出13種CSS3中常用的特性，如表：屬性colorcolor-index device-aspect-ratiodevice-height#device-widthgridheight##monochrome整數Yes單色幀緩衝器中每像素位元組分辨率(dpi/dpcm)Progressive interlaced#Length

引用媒體類型；	另一種是在標籤
Media Query媒體特性	媒體特性是CSS3對媒體類型的增強版。
值	#Min/Max	描述
整數	#Yes	每個色彩的位元組數
整數	Yes	.顏色表中的色彩數
整數/整數	Yes	#寬高比例
#Length	Yes	裝置畫面的輸出高度
Length	#Yes	裝置螢幕的輸出寬度
整數	No	是否基於柵格的裝置
Length	Yes	渲染頁面的高度
			##resolution
Yes	解析度		#scan
#No	Tv媒體類型的掃描方式		width

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

还可以根据屏幕尺寸设置相应的样式
<pre class="brush:php;toolbar:false"><link></pre>
样式适用于最大宽度为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，样式都不会被采用。
<pre class="brush:php;toolbar:false"><link></pre>