Media Queries這功能是非常強大的,他可以讓你定制不同的分辨率和裝置,并在不改變内容的情況下,讓你制作的web頁面在不同的分辨率和裝置下都能顯示正常,并且不會是以而丢失樣式。
首先來看一個簡單的執行個體:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" target="_blank" rel="external nofollow" />
上面的media語句表示的是:當頁頁寬度小于或等于600px,調用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的内容:
1、screen:這個不用說大家都知道,指的是一種媒體類型;
2、and:被稱為關鍵詞,與其相似的還有not,only,稍後會介紹;
3、(max-width:600px):這個就是媒體特性,說得通俗一點就是媒體條件。
為了更能了解Media Query,我們在次回到前面的執行個體上:轉換成css中的寫法為:
@media screen and (max-width: 600px) {
選擇器 {
屬性:屬性值;
}
}
其實就是把small.css檔案中的樣式放在了@media srceen and (max-width;600px){…}的大括号之中。在語句上面的語句結構中,可以看出Media query和css的屬性集合很相似,主要差別在:
1、Media query隻接受單個的邏輯表達式作為其值,或者沒有值;
2、css屬性用于聲明如何表現頁頁的資訊;而Media Query是一個用于判斷輸出裝置是否滿足某種條件的表達式;
3、Media Query其中的大部分接受min/max字首,用來表示其邏輯關系,表示應用于大于等于或者小于等于某個值的情況
4、CSS屬性要求必須有屬性值,Media Query可以沒有值,因為其表達式傳回的隻有真或假兩種
下面我們一起來看看Media Queries的具體使用方式
一、最大寬度Max Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" target="_blank" rel="external nofollow" type="text/css" />
上面表示的是:當螢幕大于或等于900px時,将采用big.css樣式來渲染Web頁面。
三、多個Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="text/css" />
Media Query可以結合多個媒體查詢,換句話說,一個Media Query可以包含0到多個表達式,表達式又可以包含0到多個關鍵字,以及一種Media Type。正如上面的其表示的是當螢幕在600px-900px之間時采用style.css樣式來渲染web頁面。
四、裝置螢幕的輸出寬度Device Width
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" target="_blank" rel="external nofollow" type="text/css" />
上面的代碼指的是iphone.css樣式适用于最大裝置寬度為480px,比如說iPhone上的顯示,這裡的max-device-width所指的是裝置的實際分辨率,也就是指可視面積分辨率
我們可以使用media query為android手機在不同分辨率提供特定樣式,這樣就可以解決螢幕分辨率的不同給android手機的頁面重構問題。
五、not關鍵字
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" target="_blank" rel="external nofollow" type="text/css" />
not關鍵字是用來排除某種制定的媒體類型,換句話來說就是用于排除符合表達式的裝置。
六、only關鍵字
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" target="_blank" rel="external nofollow" type="text/css" />
only用來定某種特定的媒體類型,可以用來排除不支援媒體查詢的浏覽器。其實only很多時候是用來對那些不支援Media Query但卻支援Media Type的裝置隐藏樣式表的。其主要有:支援媒體特性(Media Queries)的裝置,正常調用樣式,此時就當only不存在;對于不支援媒體特性(Media Queries)但又支援媒體類型(Media Type)的裝置,這樣就會不讀了樣式,因為其先讀only而不是screen;另外不支援Media Qqueries的浏覽器,不論是否支援only,樣式都不會被采用。
七、其他
在Media Query中如果沒有明确指定Media Type,那麼其預設為all,如:
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" target="_blank" rel="external nofollow" type="text/css" />
另外還有使用逗号(,)被用來表示并列或者表示或,如下
<link rel="stylesheet" type="text/css" href="style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小于或等于480px的手持裝置上,或者被用于螢幕寬度大于或等于960px的裝置上。
關于Media Query的使用這一節就介紹到此,最後總體規納一下其功能,個人認為就是一句話:Media Queries能在不同的條件下使用不同的樣式,使用頁面達到不同的渲染效果。