深入瞭解CSS3媒體

css3 媒體

Media Type 媒體類型

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

值	裝置類型
all	所有裝置
Braille	盲人用點字法觸覺回饋裝置
Embossed	盲文打字機
Handheld	可攜式裝置
Print	列印用紙或預覽列印視圖
Projection	各種投影裝置
Screen	電腦顯示器
Speech	語音或音頻合成器
TV	電視機類型裝置
Tty	使用固定密度字母柵格的媒介，比如電傳打字機和終端

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

媒體類型的引用方法

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

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

2. xml方法：與link引入媒體類型類似，也是通過media屬性來指定。

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

3. @import方法：@import是用來引用樣式檔案的方法之一，同樣可以用來參考型別。@import引入媒體類型主要有兩種方式。

   一種是在樣式檔案中通過@import調用另一個檔案；

   @import url(style.css) screen;

   另一種是在標籤<style>中引入。

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

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

   一種是在樣式檔案中通過@media引用媒體類型；

   @media screen{    選取器{/*樣式*/}}

   另一種是在標籤<style>中引入。

   <style>    @media screen{        選取器{/*樣式*/}    }</style>

以上四種方法都可以引用媒體類型，推薦使用第一種與第四種。

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開頭，然後指定媒體類型，隨後是指定媒體特性。

1. 最大寬度max-width

   max-width是媒體特性中最常用的一個特性，意思是指媒體類型小於或等於指定的寬度時，樣式生效。

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

   意思是當螢幕小於或等於480px時，p的寬度被重設為400px。

2. 最小寬度min-width

   min-width與max-width相反，即媒體類型大於或等於指定寬度時，樣式生效。

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

   當最小寬度等於或大於900px時，p的寬度重設為900px

3. 多個媒體特性使用

   Media Query可以使用關鍵詞“and”將多個媒體特性結合在一起。

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

   當螢幕寬度在400px~600px時，p的背景色變為紅色。

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">

CSS3 媒體特性完。