如何使用CSS3MediaQueries

本篇內(nèi)容介紹了“如何使用CSS3 Media Queries”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括科爾沁左翼網(wǎng)站建設(shè)、科爾沁左翼網(wǎng)站制作、科爾沁左翼網(wǎng)頁(yè)制作以及科爾沁左翼網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，科爾沁左翼網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到科爾沁左翼省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

Media Queries直譯過(guò)來(lái)就是“媒體查詢(xún)”，在我們平時(shí)的Web頁(yè)面中head部分?？吹竭@樣的一段代碼：

代碼如下:

或者這樣的形式：

代碼如下:

其中兩種方式引入CSS樣式都有一個(gè)共同的屬性“media”，而這個(gè)“media”就是用來(lái)指定特定的媒體類(lèi)型，在HTML4和CSS2中充許你使用“media”來(lái)指定特定的媒體類(lèi)型，如屏幕（screen）和打?。╬rint）的樣式表，當(dāng)然還有其他的，比如說(shuō)“TV”,“handheld”等，其中“all”表示的是支持所有媒體介質(zhì)。有關(guān)于更多的Media類(lèi)型，可以查看http://www.w3.org/TR/CSS2/media.html#media-types。

上面簡(jiǎn)單說(shuō)了一下HTML4和CSS2的“Media Queries”,而今天的主要是來(lái)學(xué)習(xí)CSS3中的”Media Queries”的更多使用方法和相關(guān)知識(shí)，下面我們開(kāi)始進(jìn)入今天的主題。CSS3中的Media Queries增加了更多的媒體查詢(xún)，同時(shí)你可以添加不同的媒體類(lèi)型的表達(dá)式用來(lái)檢查媒體是否符合某些條件，如果媒體符合相應(yīng)的條件，那么就會(huì)調(diào)用對(duì)應(yīng)的樣式表。換句簡(jiǎn)單的說(shuō)，“在CSS3中我們可以設(shè)置不同類(lèi)型的媒體條件，并根據(jù)對(duì)應(yīng)的條件，給相應(yīng)符合條件的媒體調(diào)用相對(duì)應(yīng)的樣式表”?，F(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í)例：

代碼如下:

上面的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ō)大家都知道，指的是一種媒體類(lèi)型；
2、and：被稱(chēng)為關(guān)鍵詞，與其相似的還有not,only，稍后會(huì)介紹；
3、（max-width:600px）：這個(gè)就是媒體特性，說(shuō)得通俗一點(diǎn)就是媒體條件。
前面這個(gè)簡(jiǎn)單的實(shí)例引出兩個(gè)概念性的東西，一個(gè)就是媒體類(lèi)型（Media Type）和媒體特性（Media Query），首先一起來(lái)理解一下這兩個(gè)概念：

一、媒體類(lèi)型(Media Type)

媒體類(lèi)型(Media Type)在css2中是一個(gè)常見(jiàn)的屬性，也是一個(gè)非常有用的屬性，可以通過(guò)媒體類(lèi)型對(duì)不同的設(shè)備指定不同的樣式，在css2中我們常碰到的就是all（全部）,screen（屏幕）,print（頁(yè)面打印或打邱預(yù)覽模式）,其實(shí)在媒體類(lèi)型不止這三種，w3c總共列出了10種媒體類(lèi)型。
頁(yè)面中引入媒體類(lèi)型方法也有多種：

1、link方法引入

代碼如下:

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中的寫(xiě)法為：

代碼如下:

@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è)備是否滿(mǎn)足某種條件的表達(dá)式；
3、Media Query其中的大部分接受min/max前綴，用來(lái)表示其邏輯關(guān)系，表示應(yīng)用于大于等于或者小于等于某個(gè)值的情況
4、CSS屬性要求必須有屬性值，Media Query可以沒(méi)有值，因?yàn)槠浔磉_(dá)式返回的只有真或假兩種
常用的Media Query如下表所示：

Media features	Value	Applies to	Accepts min/max
width	length	visual and tactile media types	yes
height	length	visual and tactile media types	yes
device-width	length	visual and tactile media types	yes
device-height	length	visual and tactile media types	yes
orientation	portrait \| landscape	bitmap media types	no
aspect-ratio	ratio	bitmap media types	yes
device-aspect-ratio	ratio	bitmap media types	yes
color	integer	visual media types	yes
color-index	integer	visual media types	yes
monochrome	integer	visual media types	yes
resolution	resolution	bitmap media types	yes
scan	progressive \| interlace	“tv” media types	no
grid	integer	visual and tactile media types	no

兼容的瀏覽器：

IE6	不支持
IE7	不支持
IE8	不支持
IE9	支持
Chrome5	支持
Opera10	支持
Firefox3.6	支持
Safari4	支持

三、Media Queries 的具體使用

下面我們一起來(lái)看看Media Queries的具體使用方式

3.1、最大寬度Max Width

代碼如下:

上面表示的是：當(dāng)屏幕小于或等于600px時(shí)，將采用small.css樣式來(lái)渲染W(wǎng)eb頁(yè)面。
3.2、最小寬度Min Width

代碼如下:

上面表示的是：當(dāng)屏幕大于或等于900px時(shí)，將采用big.css樣式來(lái)渲染W(wǎng)eb頁(yè)面。
3.3、多個(gè)Media Queries使用

代碼如下:

Media Query可以結(jié)合多個(gè)媒體查詢(xún)，換句話說(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è)面。
3.4、設(shè)備屏幕的輸出寬度Device Width

代碼如下:

上面的代碼指的是iphone.css樣式適用于最大設(shè)備寬度為480px，比如說(shuō)iPhone上的顯示，這里的max-device-width所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率
3.5、iPhone4

代碼如下:

上面的樣式是專(zhuān)門(mén)針對(duì)iPhone4的移動(dòng)設(shè)備寫(xiě)的。
3.6、iPad

代碼如下:

在大數(shù)情況下，移動(dòng)設(shè)備iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad聲明了不同的方向，比如說(shuō)上面的例子，在縱向(portrait)時(shí)采用portrait.css來(lái)渲染頁(yè)面；在橫向（landscape）時(shí)采用landscape.css來(lái)渲染頁(yè)面。
3.7、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)題。
3.8、not關(guān)鍵字

代碼如下:

not關(guān)鍵字是用來(lái)排除某種制定的媒體類(lèi)型，換句話來(lái)說(shuō)就是用于排除符合表達(dá)式的設(shè)備。
3.9、only關(guān)鍵字

代碼如下:

only用來(lái)定某種特定的媒體類(lèi)型，可以用來(lái)排除不支持媒體查詢(xún)的瀏覽器。其實(shí)only很多時(shí)候是用來(lái)對(duì)那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設(shè)備，正常調(diào)用樣式，此時(shí)就當(dāng)only不存在；對(duì)于不支持媒體特性(Media Queries)但又支持媒體類(lèi)型(Media Type)的設(shè)備，這樣就會(huì)不讀了樣式，因?yàn)槠湎茸xonly而不是screen；另外不支持Media Qqueries的瀏覽器，不論是否支持only，樣式都不會(huì)被采用。
3.10、其他
在Media Query中如果沒(méi)有明確指定Media Type，那么其默認(rèn)為all，如：

代碼如下:

另外還有使用逗號(hào)（，）被用來(lái)表示并列或者表示或，如下

代碼如下:

上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上，或者被用于屏幕寬度大于或等于960px的設(shè)備上。

“如何使用CSS3 Media Queries”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

當(dāng)前文章：如何使用CSS3MediaQueries
瀏覽路徑：http://chinadenli.net/article10/gjeogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、標(biāo)簽優(yōu)化、網(wǎng)站內(nèi)鏈、建站公司、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何使用CSS3MediaQueries