響應式佈局之CSS3媒體查詢Media Queries 的詳細介紹

利用我們的CSS3實作響應式佈局 

僅僅有彈性盒還不夠
CSS3還擴展了media屬性，增加了一個模組功能
Media Queries媒體查詢功能

媒體查詢引入

隨著行動裝置的快速普及
越來越多的使用者使用智慧型機、平板電腦等瀏覽頁面
所有考慮到用戶的需求
我們要保證用戶在各種設備上瀏覽頁面都有不錯的體驗
這樣我們就需要媒體查詢
它允許我們為不同的設備或不同條件的設備設定不同的樣式
不過如果行動端有很重要的需求
還是應該針對行動端開發專門的頁面比較好
下面我們來看看引入媒體查詢的方式

媒體查詢選擇性載入檔案

首先我們先來看看link方法
這是CSS2中的做法
使用link標籤和media屬性來引入不同樣式表（如果滿足條件）

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

這裡引入兩個概念
一個是媒體類型（Media Type），這裡的screen
一個是媒體特性 （Media Query），這裡的max-width: 600px

Media Query是CSS3 對Media Type的增強版
其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則)

這段程式碼翻譯過來就是
如果媒體媒體是螢幕類型並且視窗寬度≤600px，則引入demo.css樣式檔案

媒體查詢選擇性新增樣式

我們在CSS3中的做法是在CSS檔案中使用@media規則添加不同樣式
相比link，它能夠減少頁面請求，效果更佳

@media screen and (max-width: 600px) {    .demo1 {        ......
    }
    .demo2 {
        ......
    }
}

其他媒體查詢引入

媒體查詢有很多很多，我們不需要了解那麼多
常用的只有上面兩種
@import也可以使用媒體查詢

@import url(demo.css) screen;

媒體查詢使用

如果我們想要指定多個媒體特性
就直接使用and關鍵字
媒體特性部分的指定需要使用括號

media="screen and (min-width: 601px) and (max-width: 800px)"

樣式應用在601px~800px之間的畫面

---

媒體查詢沒有or指定備用媒體功能，但是我們可以使用逗號分隔清單

media="screen and (min-width: 601px), print and (min-width: 6in)"

樣式應用在601px+的螢幕或使用至少6英吋寬的紙張的列印設備

---

媒體查詢可以指定否定條件
需要我們在媒體聲明的最前面使用關鍵字not
注意，它不能再單一條件前單獨聲明，not會否定整個媒體聲明

media="not screen and (min-width: 600px) and (max-width: 800px)"

樣式應用在不是600px~800px之間的屏幕

---

除了not關鍵字，還有一個only
它用來向早期的瀏覽器隱藏媒體查詢
類似於not，必須宣告在媒體宣告語句的最前面
例如這段宣告

media="screen and (min-width: 601px) and (max-width: 800px)"

早期的瀏覽器，只能把它理解成media="screen"
由於它不理解媒體特性，所以它會對所有螢幕裝置應用樣式規則
但是使用了only關鍵字

media="only screen and (min-width: 601px) and (max-width: 800px)"

早期瀏覽器會把它理解為media="only "
但是不存在only媒體類型，所以它不會應用任何樣式
實現了向早期的瀏覽器隱藏媒體查詢的功能

媒體類型與媒體特性

媒體類型

媒體類型的關鍵字雖然很多，但是大多都被廢棄了（誰用啊）
常用的也就是all、screen，再就是print

媒體類型	描述
all	#所有媒體裝置
screen	彩色螢幕：電腦、平板、智慧型電腦..
print	印表機、列印預覽
speech	發生裝置：螢幕閱讀器..
aural	（已廢棄）語音和音訊合成器
braille	（已廢棄）以盲眼用盲法觸覺回饋設備
embossed	（已廢棄）分頁的盲眼用點字法印表機
handheld

######### ##（已廢棄）便攜式設備：小型電話..############projection######（已廢棄）投影設備：幻燈片..######## #####tty######（已廢棄）使用固定密度字母柵格的媒體：電傳打字機和終端..###########tv###### #（已廢棄）電視機類型設備：電視、網路電視..############

媒體特性

媒體特性就非常多了，同樣很多用不上

##描述#輸出裝置中的頁面可見區域寬度與高度的比率color輸出裝置每一組彩色原件的數量。如果不是彩色設備，則值等於0color-index在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0device-aspect-ratio輸出裝置的螢幕可見寬度與高度的比率device-輸出裝置的螢幕可見高#device-width輸出設備的螢幕可見寬度grid查詢輸出裝置是否使用柵格或點陣height輸出裝置中的頁面可見區域高度max-aspect-ratio輸出裝置的螢幕可見寬度與高度的最大比率max-color輸出裝置每一組彩色原件的最大個數#max-color-indexmax-device-aspect-ratiomax-device-heightmax-device-widthmax-heightmax-monochr框架max-resolution#max-widthmin-aspect-ratiomin-color min-color-indexmin-device-aspect-ratiomin- device-width#min-device-heightmin-heightmin-monochrome#min-resolutionmin-widthmonochromeorientationresolution300#scan #width

#媒體類型
#aspect-ratio
height
##輸出裝置的彩色查詢表中的最大條目數
輸出裝置的螢幕可見寬度與高度的最大比率
輸出裝置的螢幕可見的最大高度
輸出裝置的螢幕最大可見寬度
#輸出裝置中的頁面最大可見區域高度
ome在一個單色	緩衝區中每個像素包含的最大單色原件個數
裝置最大解析度
輸出裝置中頁面最大可見區域寬度
輸出裝置中頁面可見區域寬度與高度的最小比率
輸出裝置每一組彩色原件的最小個數
輸出裝置的彩色查詢表中的最小條目數
輸出裝置螢幕可見寬度與高度的最小比率
輸出裝置的螢幕最小可見寬度
輸出裝置的螢幕的最小可見高度
輸出裝置中的頁面最小可見區域高度
一個單色框架緩衝區中每個像素包含的最小單色原件個數
裝置的最小解析度
輸出裝置中的頁面最小可見區寬度
在一個單色框架緩衝區中每像素包含的單色原件個數。如果不是單色設備，則值等於0
#輸出設備中的頁面可見區域高度是否大於或等於寬度
裝置的解析度。如：96dpi,	dpi, 118dpcm
電視類別裝置的掃描工序
#輸出裝置中的頁面可見區域寬度

#這裡有註意區分device-width/height與width/height

device -width/height 是裝置的寬度（而不是瀏覽器的寬度）
width/height是我們瀏覽器視窗的尺寸
使用
document
Element.clientWidth/clientHeight即viewport 的值

以上是響應式佈局之CSS3媒體查詢Media Queries 的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！