響應(yīng)式布局之CSS3媒體查詢MediaQueries的詳細(xì)介紹

利用我們的CSS3實(shí)現(xiàn)響應(yīng)式布局

僅僅有彈性盒還不夠
CSS3還擴(kuò)展了media屬性，增加了一個模塊功能
Media Queries媒體查詢功能

媒體查詢引入

隨著移動端的快速普及
越來越多的用戶使用智能機(jī)、平板電腦等瀏覽頁面
所有考慮到用戶的需求
我們要保證用戶在各種設(shè)備上瀏覽頁面都有不錯的體驗(yàn)
這樣我們就需要媒體查詢
它允許我們?yōu)椴煌脑O(shè)備或者不同條件的設(shè)備設(shè)置不同的樣式
不過如果移動端有很重要的需求
還是應(yīng)該針對移動端開發(fā)專門的頁面比較好
下面我們來看看引入媒體查詢的方式

媒體查詢選擇性加載文件

首先我們先來看看link方法
這是CSS2中的做法
使用link標(biāo)簽和media屬性引入不同樣式表（如果滿足條件）

<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />

這里引入兩個概念
一個是媒體類型（Media Type），這里的screen
一個是媒體特性（Media Query），這里的max-width: 600px

Media Query是CSS3 對Media Type的增強(qiáng)版
其實(shí)可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規(guī)則)

這段代碼翻譯過來就是
如果媒體介質(zhì)是屏幕類型并且視窗寬度≤600px，則引入demo.css樣式文件

媒體查詢選擇性添加樣式

我們在CSS3中的做法是在CSS文件中使用@media規(guī)則添加不同樣式
相比link，它能夠減少頁面請求，效果更佳

@media screen and (max-width: 600px) { .demo1 { ......
 }
 .demo2 {
 ......
 }
}

其他媒體查詢引入

媒體查詢有很多很多，我們不需要了解那么多
常用的只有上面兩種
@import也可以使用媒體查詢

@import url(demo.css) screen;

媒體查詢使用

如果我們想指定多個媒體特性
就直接使用and關(guān)鍵字
媒體特性部分的指定需要使用括號

media="screen and (min-width: 601px) and (max-width: 800px)"

樣式應(yīng)用在601px~800px之間的屏幕

媒體查詢沒有or指定備用媒體功能，但是我們可以使用逗號分隔列表

media="screen and (min-width: 601px), print and (min-width: 6in)"

樣式應(yīng)用在601px+的屏幕或使用至少6英寸寬的紙張的打印設(shè)備

媒體查詢可以指定否定條件
需要我們在媒體聲明的最前面使用關(guān)鍵字not
注意，它不能再單個條件前單獨(dú)聲明，not會否定整個媒體聲明

media="not screen and (min-width: 600px) and (max-width: 800px)"

樣式應(yīng)用在不是600px~800px之間的屏幕

除了not關(guān)鍵字，還有一個only
它用來向早期的瀏覽器隱藏媒體查詢
類似于not，必須聲明在媒體聲明語句的最前面
比如這段聲明

media="screen and (min-width: 601px) and (max-width: 800px)"

早期的瀏覽器，只能把它理解成media="screen"
由于它不理解媒體特性，所以它會對所有屏幕設(shè)備應(yīng)用樣式規(guī)則
但是使用了only關(guān)鍵字

media="only screen and (min-width: 601px) and (max-width: 800px)"

早期瀏覽器會把它理解為media="only"
但是不存在only媒體類型，所以它不會應(yīng)用任何樣式
實(shí)現(xiàn)了向早期的瀏覽器隱藏媒體查詢的功能

媒體類型與媒體特性

媒體類型

媒體類型的關(guān)鍵字雖然很多，但是大多都被廢棄了（誰用?。?
常用的也就是all、screen，再就是print

媒體特性

媒體特性就非常多了，同樣很多用不上

這里注意區(qū)分device-width/height與width/height
device-width/height 是設(shè)備的寬度（而不是瀏覽器的寬度）
width/height是我們?yōu)g覽器視窗的尺寸
使用documentElement.clientWidth/clientHeight即viewport的值

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com