- 簡(jiǎn)體
- 簡(jiǎn)體中文 English
網(wǎng)站設(shè)計(jì)自適應(yīng)的案例框架Media Queres
來(lái)源：尚品中國(guó)|
類型：網(wǎng)站百科|
時(shí)間：2015-04-22
什么是Media Queres?
Media Queres是一個(gè)專門提供自適應(yīng)網(wǎng)站設(shè)計(jì)參考的網(wǎng)站，這里陳列了許多采用了自適應(yīng)網(wǎng)站設(shè)計(jì)方案的網(wǎng)站。你如果是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的話肯定會(huì)遇到客戶要求他自己的網(wǎng)站需要自適應(yīng)的功能，到時(shí)候Media Queres就會(huì)帶給你巨大的設(shè)計(jì)幫助！
代碼下載官方網(wǎng)址：http://mediaqueri.es/
Media Queries詳解
Media Queries直譯過(guò)來(lái)就是“媒體查詢”，在我們平時(shí)的Web頁(yè)面中head部分?？吹竭@樣的一段代碼：
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
或者這樣的形式：
<style type="text/css" media="screen">
@import url("css/style.css");
</style>
不知道大家留意沒(méi)有，其中兩種方式引入CSS樣式都有一個(gè)共同的屬性“media”，而這個(gè)“media”就是用來(lái)指定特定的媒體類型，在HTML4和CSS2中充許你使用“media”來(lái)指定特定的媒體類型，如屏幕（screen）和打?。╬rint）的樣式表，當(dāng)然還有其他的，比如說(shuō)“TV”,“handheld”等，其中“all”表示的是支持所有媒體介質(zhì)。有關(guān)于更多的Media類型，可以點(diǎn)擊這里。
上面簡(jiǎn)單說(shuō)了一下HTML4和CSS2的“Media Queries”,而今天的主要是來(lái)學(xué)習(xí)CSS3中的"Media Queries"的更多使用方法和相關(guān)知識(shí)，下面我們開(kāi)始進(jìn)入今天的主題。
CSS3中的Media Queries增加了更多的媒體查詢，同時(shí)你可以添加不同的媒體類型的表達(dá)式用來(lái)檢查媒體是否符合某些條件，如果媒體符合相應(yīng)的條件，那么就會(huì)調(diào)用對(duì)應(yīng)的 樣式表。
換句簡(jiǎn)單的說(shuō)，“在CSS3中我們可以設(shè)置不同類型的媒體條件，并根據(jù)對(duì)應(yīng)的條件，給相應(yīng)符合條件的媒體調(diào)用相對(duì)應(yīng)的樣式表”。
現(xiàn)在最常見(jiàn)的一個(gè) 例子，你可以同時(shí)給PC機(jī)的大屏幕和移動(dòng)設(shè)備設(shè)置不同的樣式表。這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁(yè)面在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟失樣式。
首先來(lái)看一個(gè)簡(jiǎn)單的實(shí)例：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
上面的media語(yǔ)句表示的是：當(dāng)頁(yè)頁(yè)寬度小于或等于600px,調(diào)用small.css樣式表來(lái)渲染你的Web頁(yè)面。首先來(lái)看media的語(yǔ)句中包含的內(nèi)容：
1、screen：這個(gè)不用說(shuō)大家都知道，指的是一種媒體類型；
2、and：被稱為關(guān)鍵詞，與其相似的還有not,only，稍后會(huì)介紹；
3、（max-width:600px）：這個(gè)就是媒體特性，說(shuō)得通俗一點(diǎn)就是媒體條件。
前面這個(gè)簡(jiǎn)單的實(shí)例引出兩個(gè)概念性的東西，一個(gè)就是媒體類型（Media Type）和 媒體特性（Media Query），首先一起來(lái)理解一下這兩個(gè)概念：
一、媒體類型(Media Type)
媒體類型(Media Type)在css2中是一個(gè)常見(jiàn)的屬性，也是一個(gè)非常有用的屬性，可以通過(guò)媒體類型對(duì)不同的設(shè)備指定不同的樣式，在css2中我們常碰到的就是 all（全部）,screen（屏幕）,print（頁(yè)面打印或打邱預(yù)覽模式）,其實(shí)在媒體類型不止這三種，w3c總共列出了10種媒體類型。
頁(yè)面中引入媒體類型方法也有多種：
1、link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@import方式引入
@import引入有兩種方式，一種是在樣式文件中通過(guò)@import調(diào)用別一個(gè)樣式文件；另一種方法是 在<head>>/head>中的<style>...</style>中引入，單這種使用方法在 ie6-7都不被支持如樣式文件中調(diào)用另一個(gè)樣式文件：
@import url("css/reset.css") screen;
@import url("css/print.css") print;
在<head>>/head>中的<style>...</style>中調(diào)用：
<head>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>
4、@media引入
這種引入方式和@imporr是一樣的，也有兩種方式：
樣式文件中使用：
@media screen{
選擇器{
屬性：屬性值；
}
}
在<head>>/head>中的<style>...</style>中調(diào)用：
<head>
<style type="text/css">
@media screen{
選擇器{
屬性：屬性值；
}
}
</style>
</head>
以上幾種方法都有其各自的利弊，在實(shí)際應(yīng)用中我建議使用第一種和第四種，因?yàn)檫@兩種方法是在項(xiàng)目制作中是常用的方法，對(duì)于他們的具體區(qū)別，我就不說(shuō)了，想了解的大家可以去找度娘或Ｇ爸，他們能幫你解決。
二、媒體特性（Media Query）
前面有簡(jiǎn)單的提到，Media Query是CSS3 對(duì)Media Type的增強(qiáng)版，其實(shí)可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規(guī)則)，常用的特性w3c共列出來(lái)13種。
具體的可以參閱：Media features。為了更能理解Media Query，我們?cè)诖位氐角懊娴膶?shí)例上：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
轉(zhuǎn)換成css中的寫法為：
@media screen and (max-width: 600px) {
選擇器 {
屬性：屬性值；
}
}
其實(shí)就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){...}的大括號(hào)之中。在語(yǔ)句上面的語(yǔ)句結(jié)構(gòu)中，可以看出Media query和css的屬性集合很相似，主要區(qū)別在：
1、Media query只接受單個(gè)的邏輯表達(dá)式作為其值，或者沒(méi)有值；
2、css屬性用于聲明如何表現(xiàn)頁(yè)頁(yè)的信息；而Media Query是一個(gè)用于判斷輸出設(shè)備是否滿足某種條件的表達(dá)式；
3、Media Query其中的大部分接受min/max前綴，用來(lái)表示其邏輯關(guān)系，表示應(yīng)用于大于等于或者小于等于某個(gè)值的情況
4、CSS屬性要求必須有屬性值，Media Query可以沒(méi)有值，因?yàn)槠浔磉_(dá)式返回的只有真或假兩種
常用的Media Query如下表所示：
兼容的瀏覽器：
下面我們一起來(lái)看看Media Queries的具體使用方式
一、最大寬度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是：當(dāng)屏幕小于或等于600px時(shí)，將采用small.css樣式來(lái)渲染W(wǎng)eb頁(yè)面。
二、最小寬度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是：當(dāng)屏幕大于或等于900px時(shí)，將采用big.css樣式來(lái)渲染W(wǎng)eb頁(yè)面。
三、多個(gè)Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
Media Query可以結(jié)合多個(gè)媒體查詢，換句話說(shuō)，一個(gè)Media Query可以包含0到多個(gè)表達(dá)式，表達(dá)式又可以包含0到多個(gè)關(guān)鍵字，以及一種Media Type。
正如上面的其表示的是當(dāng)屏幕在600px-900px之間時(shí)采用style.css樣式來(lái)渲染web頁(yè)面。
四、設(shè)備屏幕的輸出寬度Device Width
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
上面的代碼指的是iphone.css樣式適用于最大設(shè)備寬度為480px，比如說(shuō)iPhone上的顯示，這里的max-device-width所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率。
五、iPhone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
上面的樣式是專門針對(duì)iPhone4的移動(dòng)設(shè)備寫的。
六、iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
在大數(shù)情況下，移動(dòng)設(shè)備iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad聲明了不同的方向，比如說(shuō) 上面的例子，在縱向(portrait)時(shí)采用portrait.css來(lái)渲染頁(yè)面；
在橫向（landscape）時(shí)采用landscape.css來(lái)渲 染頁(yè)面。
七、android
/*240px的寬度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
我們可以使用media query為android手機(jī)在不同分辨率提供特定樣式，這樣就可以解決屏幕分辨率的不同給android手機(jī)的頁(yè)面重構(gòu)問(wèn)題。
八、not關(guān)鍵字
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not關(guān)鍵字是用來(lái)排除某種制定的媒體類型，換句話來(lái)說(shuō)就是用于排除符合表達(dá)式的設(shè)備。
九、only關(guān)鍵字
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only用來(lái)定某種特定的媒體類型，可以用來(lái)排除不支持媒體查詢的瀏覽器。其實(shí)only很多時(shí)候是用來(lái)對(duì)那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。
其主要有：支持媒體特性（Media Queries）的設(shè)備，正常調(diào)用樣式，此時(shí)就當(dāng)only不存在；對(duì)于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備，這樣就會(huì)不讀了樣式，因?yàn)槠湎茸xonly而不是screen；另外不支持Media Qqueries的瀏覽器，不論是否支持only，樣式都不會(huì)被采用。
十、其他
在Media Query中如果沒(méi)有明確指定Media Type，那么其默認(rèn)為all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外還有使用逗號(hào)（，）被用來(lái)表示并列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上，或者被用于屏幕寬度大于或等于960px的設(shè)備上。
關(guān)于Media Query的使用這一節(jié)就介紹到此，最后總體規(guī)納一下其功能，個(gè)人認(rèn)為就是一句話：Media Queries能在不同的條件下使用不同的樣式，使用頁(yè)面達(dá)到不同的渲染效果。
幾款Media Query設(shè)計(jì)案例展示：
FROONT
International Polar Foundation
Hirondelle USA
Media Queres是一個(gè)專門提供自適應(yīng)網(wǎng)站設(shè)計(jì)參考的網(wǎng)站，這里陳列了許多采用了自適應(yīng)網(wǎng)站設(shè)計(jì)方案的網(wǎng)站。你如果是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的話肯定會(huì)遇到客戶要求他自己的網(wǎng)站需要自適應(yīng)的功能，到時(shí)候Media Queres就會(huì)帶給你巨大的設(shè)計(jì)幫助！
代碼下載官方網(wǎng)址：http://mediaqueri.es/
Media Queries詳解
Media Queries直譯過(guò)來(lái)就是“媒體查詢”，在我們平時(shí)的Web頁(yè)面中head部分?？吹竭@樣的一段代碼：
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
或者這樣的形式：
<style type="text/css" media="screen">
@import url("css/style.css");
</style>
不知道大家留意沒(méi)有，其中兩種方式引入CSS樣式都有一個(gè)共同的屬性“media”，而這個(gè)“media”就是用來(lái)指定特定的媒體類型，在HTML4和CSS2中充許你使用“media”來(lái)指定特定的媒體類型，如屏幕（screen）和打?。╬rint）的樣式表，當(dāng)然還有其他的，比如說(shuō)“TV”,“handheld”等，其中“all”表示的是支持所有媒體介質(zhì)。有關(guān)于更多的Media類型，可以點(diǎn)擊這里。
上面簡(jiǎn)單說(shuō)了一下HTML4和CSS2的“Media Queries”,而今天的主要是來(lái)學(xué)習(xí)CSS3中的"Media Queries"的更多使用方法和相關(guān)知識(shí)，下面我們開(kāi)始進(jìn)入今天的主題。
CSS3中的Media Queries增加了更多的媒體查詢，同時(shí)你可以添加不同的媒體類型的表達(dá)式用來(lái)檢查媒體是否符合某些條件，如果媒體符合相應(yīng)的條件，那么就會(huì)調(diào)用對(duì)應(yīng)的 樣式表。
換句簡(jiǎn)單的說(shuō)，“在CSS3中我們可以設(shè)置不同類型的媒體條件，并根據(jù)對(duì)應(yīng)的條件，給相應(yīng)符合條件的媒體調(diào)用相對(duì)應(yīng)的樣式表”。
現(xiàn)在最常見(jiàn)的一個(gè) 例子，你可以同時(shí)給PC機(jī)的大屏幕和移動(dòng)設(shè)備設(shè)置不同的樣式表。這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁(yè)面在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟失樣式。
首先來(lái)看一個(gè)簡(jiǎn)單的實(shí)例：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
上面的media語(yǔ)句表示的是：當(dāng)頁(yè)頁(yè)寬度小于或等于600px,調(diào)用small.css樣式表來(lái)渲染你的Web頁(yè)面。首先來(lái)看media的語(yǔ)句中包含的內(nèi)容：
1、screen：這個(gè)不用說(shuō)大家都知道，指的是一種媒體類型；
2、and：被稱為關(guān)鍵詞，與其相似的還有not,only，稍后會(huì)介紹；
3、（max-width:600px）：這個(gè)就是媒體特性，說(shuō)得通俗一點(diǎn)就是媒體條件。
前面這個(gè)簡(jiǎn)單的實(shí)例引出兩個(gè)概念性的東西，一個(gè)就是媒體類型（Media Type）和 媒體特性（Media Query），首先一起來(lái)理解一下這兩個(gè)概念：
一、媒體類型(Media Type)
媒體類型(Media Type)在css2中是一個(gè)常見(jiàn)的屬性，也是一個(gè)非常有用的屬性，可以通過(guò)媒體類型對(duì)不同的設(shè)備指定不同的樣式，在css2中我們常碰到的就是 all（全部）,screen（屏幕）,print（頁(yè)面打印或打邱預(yù)覽模式）,其實(shí)在媒體類型不止這三種，w3c總共列出了10種媒體類型。
頁(yè)面中引入媒體類型方法也有多種：
1、link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@import方式引入
@import引入有兩種方式，一種是在樣式文件中通過(guò)@import調(diào)用別一個(gè)樣式文件；另一種方法是 在<head>>/head>中的<style>...</style>中引入，單這種使用方法在 ie6-7都不被支持如樣式文件中調(diào)用另一個(gè)樣式文件：
@import url("css/reset.css") screen;
@import url("css/print.css") print;
在<head>>/head>中的<style>...</style>中調(diào)用：
<head>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>
4、@media引入
這種引入方式和@imporr是一樣的，也有兩種方式：
樣式文件中使用：
@media screen{
選擇器{
屬性：屬性值；
}
}
在<head>>/head>中的<style>...</style>中調(diào)用：
<head>
<style type="text/css">
@media screen{
選擇器{
屬性：屬性值；
}
}
</style>
</head>
以上幾種方法都有其各自的利弊，在實(shí)際應(yīng)用中我建議使用第一種和第四種，因?yàn)檫@兩種方法是在項(xiàng)目制作中是常用的方法，對(duì)于他們的具體區(qū)別，我就不說(shuō)了，想了解的大家可以去找度娘或Ｇ爸，他們能幫你解決。
二、媒體特性（Media Query）
前面有簡(jiǎn)單的提到，Media Query是CSS3 對(duì)Media Type的增強(qiáng)版，其實(shí)可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規(guī)則)，常用的特性w3c共列出來(lái)13種。
具體的可以參閱：Media features。為了更能理解Media Query，我們?cè)诖位氐角懊娴膶?shí)例上：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
轉(zhuǎn)換成css中的寫法為：
@media screen and (max-width: 600px) {
選擇器 {
屬性：屬性值；
}
}
其實(shí)就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){...}的大括號(hào)之中。在語(yǔ)句上面的語(yǔ)句結(jié)構(gòu)中，可以看出Media query和css的屬性集合很相似，主要區(qū)別在：
1、Media query只接受單個(gè)的邏輯表達(dá)式作為其值，或者沒(méi)有值；
2、css屬性用于聲明如何表現(xiàn)頁(yè)頁(yè)的信息；而Media Query是一個(gè)用于判斷輸出設(shè)備是否滿足某種條件的表達(dá)式；
3、Media Query其中的大部分接受min/max前綴，用來(lái)表示其邏輯關(guān)系，表示應(yīng)用于大于等于或者小于等于某個(gè)值的情況
4、CSS屬性要求必須有屬性值，Media Query可以沒(méi)有值，因?yàn)槠浔磉_(dá)式返回的只有真或假兩種
常用的Media Query如下表所示：
兼容的瀏覽器：
下面我們一起來(lái)看看Media Queries的具體使用方式
一、最大寬度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是：當(dāng)屏幕小于或等于600px時(shí)，將采用small.css樣式來(lái)渲染W(wǎng)eb頁(yè)面。
二、最小寬度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是：當(dāng)屏幕大于或等于900px時(shí)，將采用big.css樣式來(lái)渲染W(wǎng)eb頁(yè)面。
三、多個(gè)Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
Media Query可以結(jié)合多個(gè)媒體查詢，換句話說(shuō)，一個(gè)Media Query可以包含0到多個(gè)表達(dá)式，表達(dá)式又可以包含0到多個(gè)關(guān)鍵字，以及一種Media Type。
正如上面的其表示的是當(dāng)屏幕在600px-900px之間時(shí)采用style.css樣式來(lái)渲染web頁(yè)面。
四、設(shè)備屏幕的輸出寬度Device Width
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
上面的代碼指的是iphone.css樣式適用于最大設(shè)備寬度為480px，比如說(shuō)iPhone上的顯示，這里的max-device-width所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率。
五、iPhone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
上面的樣式是專門針對(duì)iPhone4的移動(dòng)設(shè)備寫的。
六、iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
在大數(shù)情況下，移動(dòng)設(shè)備iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad聲明了不同的方向，比如說(shuō) 上面的例子，在縱向(portrait)時(shí)采用portrait.css來(lái)渲染頁(yè)面；
在橫向（landscape）時(shí)采用landscape.css來(lái)渲 染頁(yè)面。
七、android
/*240px的寬度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
我們可以使用media query為android手機(jī)在不同分辨率提供特定樣式，這樣就可以解決屏幕分辨率的不同給android手機(jī)的頁(yè)面重構(gòu)問(wèn)題。
八、not關(guān)鍵字
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not關(guān)鍵字是用來(lái)排除某種制定的媒體類型，換句話來(lái)說(shuō)就是用于排除符合表達(dá)式的設(shè)備。
九、only關(guān)鍵字
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only用來(lái)定某種特定的媒體類型，可以用來(lái)排除不支持媒體查詢的瀏覽器。其實(shí)only很多時(shí)候是用來(lái)對(duì)那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。
其主要有：支持媒體特性（Media Queries）的設(shè)備，正常調(diào)用樣式，此時(shí)就當(dāng)only不存在；對(duì)于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備，這樣就會(huì)不讀了樣式，因?yàn)槠湎茸xonly而不是screen；另外不支持Media Qqueries的瀏覽器，不論是否支持only，樣式都不會(huì)被采用。
十、其他
在Media Query中如果沒(méi)有明確指定Media Type，那么其默認(rèn)為all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外還有使用逗號(hào)（，）被用來(lái)表示并列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上，或者被用于屏幕寬度大于或等于960px的設(shè)備上。
關(guān)于Media Query的使用這一節(jié)就介紹到此，最后總體規(guī)納一下其功能，個(gè)人認(rèn)為就是一句話：Media Queries能在不同的條件下使用不同的樣式，使用頁(yè)面達(dá)到不同的渲染效果。
幾款Media Query設(shè)計(jì)案例展示：
FROONT
International Polar Foundation
Hirondelle USA
來(lái)源聲明：本文章系尚品中國(guó)編輯原創(chuàng)或采編整理，如需轉(zhuǎn)載請(qǐng)注明來(lái)自尚品中國(guó)。以上內(nèi)容部分(包含圖片、文字)來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)及時(shí)與本站聯(lián)系（010-60259772）。
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁(yè)面設(shè)計(jì)風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計(jì)開(kāi)發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標(biāo)簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開(kāi)發(fā)
- 小程序開(kāi)發(fā)
- 無(wú)錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽(yáng)網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機(jī)端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計(jì)
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
鄭州網(wǎng)站建設(shè)如何達(dá)到網(wǎng)站的轉(zhuǎn)化率？
眾所周知，營(yíng)銷網(wǎng)站建設(shè)與網(wǎng)站轉(zhuǎn)化率的關(guān)系已經(jīng)被很多互聯(lián)網(wǎng)公司反復(fù)討論，...
2021-06-28 -
企業(yè)型網(wǎng)站建設(shè)結(jié)合網(wǎng)站優(yōu)化應(yīng)該怎樣設(shè)計(jì)網(wǎng)站結(jié)構(gòu)
北京網(wǎng)站建設(shè)公司尚品中國(guó)：從事互聯(lián)網(wǎng)網(wǎng)站方面工作已經(jīng)有一段時(shí)間了，方向...
2012-08-16 -
企業(yè)網(wǎng)站建設(shè)的主要流程包括哪些
目前，每個(gè)行業(yè)都有建設(shè)網(wǎng)站的需求。有了自己的官網(wǎng)后，可以擴(kuò)大公司的知名...
2021-10-13 -
WAP網(wǎng)站建設(shè)(WAP網(wǎng)站制作)全攻略教程
WAP（wml）開(kāi)發(fā)教程WAP（無(wú)線應(yīng)用協(xié)議）是在數(shù)字移動(dòng)電話、因特網(wǎng)...
2012-06-14 -
重新認(rèn)識(shí)PHP
PHP語(yǔ)言是計(jì)算機(jī)能讀懂的語(yǔ)言。所以PHP語(yǔ)言可以用來(lái)編程。人類交流的...
2015-12-09 -
全文檢索搜索引擎排名優(yōu)化
在北京網(wǎng)站建設(shè)公司被搜索引擎成功收錄之后，也只是完成了搜索引擎策略的第...
2012-09-02
如果您的網(wǎng)站可以增加轉(zhuǎn)化次數(shù)并提高客戶滿意度，該怎么辦？
預(yù)約專業(yè)咨詢顧問(wèn)溝通！
Copyright ? 2024 恒久尚品 版權(quán)所有 | 京ICP備09066521號(hào)
| 公安機(jī)關(guān)備案號(hào):11011502003910
免責(zé)聲明
誠(chéng)信企業(yè)
尚品專注高端網(wǎng)站建設(shè)，系統(tǒng)平臺(tái)開(kāi)發(fā)，微信小程序及APP開(kāi)發(fā)服務(wù)
尚品專注高端網(wǎng)站建設(shè)，系統(tǒng)平臺(tái)開(kāi)發(fā)，微信小程序及APP開(kāi)發(fā)服務(wù)
免責(zé)聲明
非常感謝您訪問(wèn)我們的網(wǎng)站。在您使用本網(wǎng)站之前，請(qǐng)您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來(lái)源自網(wǎng)絡(luò)，涉及到的部分文章和圖片版權(quán)屬于原作者，本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流，切勿用于任何商業(yè)活動(dòng)。
2、本站不承擔(dān)用戶因使用這些資源對(duì)自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問(wèn)題參見(jiàn)國(guó)家有關(guān)法律法規(guī)，當(dāng)本聲明與國(guó)家法律法規(guī)沖突時(shí)，以國(guó)家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益，請(qǐng)您及時(shí)與我們,我們會(huì)在第一時(shí)間刪除相關(guān)內(nèi)容!
聯(lián)系方式：010-60259772
電子郵件：394588593@qq.com
