CSS3 Media Queries(響應(yīng)式布局可以讓你定制不同的分辨率和設(shè)備)

2024-07-11 08:28:44

字體：大中小

供稿：網(wǎng)友

Media Queries這功能是非常強大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁面在不同的分辨率和設(shè)備下都能顯示正常，并且不會因此而丟失樣式。
首先來看一個簡單的實例：

復(fù)制代碼

代碼如下:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media語句表示的是：當(dāng)頁頁寬度小于或等于600px,調(diào)用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的內(nèi)容：
1、screen：這個不用說大家都知道，指的是一種媒體類型；
2、and：被稱為關(guān)鍵詞，與其相似的還有not,only，稍后會介紹；
3、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。
為了更能理解Media Query，我們在次回到前面的實例上：轉(zhuǎn)換成css中的寫法為：

復(fù)制代碼

代碼如下:
@media screen and (max-width: 600px) {
選擇器 {
屬性：屬性值；
}
}

其實就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){…}的大括號之中。在語句上面的語句結(jié)構(gòu)中，可以看出Media query和css的屬性集合很相似，主要區(qū)別在：
1、Media query只接受單個的邏輯表達式作為其值，或者沒有值；
2、css屬性用于聲明如何表現(xiàn)頁頁的信息；而Media Query是一個用于判斷輸出設(shè)備是否滿足某種條件的表達式；
3、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關(guān)系，表示應(yīng)用于大于等于或者小于等于某個值的情況
4、CSS屬性要求必須有屬性值，Media Query可以沒有值，因為其表達式返回的只有真或假兩種

下面我們一起來看看Media Queries的具體使用方式
一、最大寬度Max Width

復(fù)制代碼

代碼如下:
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

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

復(fù)制代碼

代碼如下:
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

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

復(fù)制代碼

代碼如下:

上一篇：li樣式不顯示使用overflow:hidden導(dǎo)致Li前面點、圈等樣式不見

下一篇：怎樣使div中的文字在div的底部顯示實現(xiàn)樣式