如何使用CSS3MediaQueries

本篇內容介紹了“如何使用CSS3 Media Queries”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創新互聯服務項目包括科爾沁左翼網站建設、科爾沁左翼網站制作、科爾沁左翼網頁制作以及科爾沁左翼網絡營銷策劃等。多年來，我們專注于互聯網行業，利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等，向廣大中小型企業、政府機構等提供互聯網行業的解決方案，科爾沁左翼網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到科爾沁左翼省份的部分城市，未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任！

Media Queries直譯過來就是“媒體查詢”，在我們平時的Web頁面中head部分常看到這樣的一段代碼：

代碼如下:

或者這樣的形式：

代碼如下:

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

上面簡單說了一下HTML4和CSS2的“Media Queries”,而今天的主要是來學習CSS3中的”Media Queries”的更多使用方法和相關知識，下面我們開始進入今天的主題。CSS3中的Media Queries增加了更多的媒體查詢，同時你可以添加不同的媒體類型的表達式用來檢查媒體是否符合某些條件，如果媒體符合相應的條件，那么就會調用對應的樣式表。換句簡單的說，“在CSS3中我們可以設置不同類型的媒體條件，并根據對應的條件，給相應符合條件的媒體調用相對應的樣式表”。現在最常見的一個例子，你可以同時給PC機的大屏幕和移動設備設置不同的樣式表。這功能是非常強大的，他可以讓你定制不同的分辨率和設備，并在不改變內容的情況下，讓你制作的web頁面在不同的分辨率和設備下都能顯示正常，并且不會因此而丟失樣式。

首先來看一個簡單的實例：

代碼如下:

上面的media語句表示的是：當頁頁寬度小于或等于600px,調用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的內容：
1、screen：這個不用說大家都知道，指的是一種媒體類型；
2、and：被稱為關鍵詞，與其相似的還有not,only，稍后會介紹；
3、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。
前面這個簡單的實例引出兩個概念性的東西，一個就是媒體類型（Media Type）和媒體特性（Media Query），首先一起來理解一下這兩個概念：

一、媒體類型(Media Type)

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

1、link方法引入

代碼如下:

2、xml方式引入

代碼如下:

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

3、@import方式引入
@import引入有兩種方式，一種是在樣式文件中通過@import調用別一個樣式文件；另一種方法是在<head>>/head>中的<style>…</style>中引入，單這種使用方法在ie6-7都不被支持如
樣式文件中調用另一個樣式文件：

代碼如下:

@import url("css/reset.css") screen;
@import url("css/print.css") print;

在<head>>/head>中的<style>…</style>中調用：

代碼如下:

<head>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>

4、@media引入
這種引入方式和@imporr是一樣的，也有兩種方式：
樣式文件中使用：

代碼如下:

@media screen{
選擇器{
屬性：屬性值；
}
}

在<head>>/head>中的<style>…</style>中調用：

代碼如下:

<head>
<style type="text/css">
@media screen{
選擇器{
屬性：屬性值；
}
}
</style>
</head>

以上幾種方法都有其各自的利弊，在實際應用中我建議使用第一種和第四種，因為這兩種方法是在項目制作中是常用的方法，對于他們的具體區別，我就不說了，想了解的大家可以去找度娘或Ｇ爸，他們能幫你解決。

二、媒體特性（Media Query）

前面有簡單的提到，Media Query是CSS3 對Media Type的增強版，其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則)，常用的特性w3c共列出來13種。具體的可以參閱：Media features。為了更能理解Media Query，我們在次回到前面的實例上：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
轉換成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 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 的具體使用

下面我們一起來看看Media Queries的具體使用方式

3.1、最大寬度Max Width

代碼如下:

上面表示的是：當屏幕小于或等于600px時，將采用small.css樣式來渲染Web頁面。
3.2、最小寬度Min Width

代碼如下:

上面表示的是：當屏幕大于或等于900px時，將采用big.css樣式來渲染Web頁面。
3.3、多個Media Queries使用

代碼如下:

Media Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種Media Type。正如上面的其表示的是當屏幕在600px-900px之間時采用style.css樣式來渲染web頁面。
3.4、設備屏幕的輸出寬度Device Width

代碼如下:

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

代碼如下:

上面的樣式是專門針對iPhone4的移動設備寫的。
3.6、iPad

代碼如下:

在大數情況下，移動設備iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad聲明了不同的方向，比如說上面的例子，在縱向(portrait)時采用portrait.css來渲染頁面；在橫向（landscape）時采用landscape.css來渲染頁面。
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手機在不同分辨率提供特定樣式，這樣就可以解決屏幕分辨率的不同給android手機的頁面重構問題。
3.8、not關鍵字

代碼如下:

not關鍵字是用來排除某種制定的媒體類型，換句話來說就是用于排除符合表達式的設備。
3.9、only關鍵字

代碼如下:

only用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設備，正常調用樣式，此時就當only不存在；對于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設備，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支持Media Qqueries的瀏覽器，不論是否支持only，樣式都不會被采用。
3.10、其他
在Media Query中如果沒有明確指定Media Type，那么其默認為all，如：

代碼如下:

另外還有使用逗號（，）被用來表示并列或者表示或，如下

代碼如下:

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

“如何使用CSS3 Media Queries”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

當前文章：如何使用CSS3MediaQueries
瀏覽路徑：http://vcdvsql.cn/article10/gjeogo.html

成都網站建設公司_創新互聯，為您提供虛擬主機、標簽優化、網站內鏈、建站公司、外貿網站建設、品牌網站制作