第講響應(yīng)式設(shè)計(jì)媒體查詢(xún)

響應(yīng)式Web設(shè)計(jì)CSS媒體查詢(xún)目前一頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)1、CSS3媒體查詢(xún)

計(jì)算當(dāng)前瀏覽器環(huán)境的某些方面（如窗口寬度、長(zhǎng)寬比和方向等），來(lái)確定應(yīng)用哪個(gè)CSS。2、流式網(wǎng)格布局對(duì)頁(yè)面布局元素使用相對(duì)CSS比例而不是絕對(duì)大小。3、流式圖像和媒體通過(guò)使用一些CSS技巧，使圖像和媒體比例適應(yīng)其瀏覽器的大小約束。響應(yīng)式Web設(shè)計(jì)目前二頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)

通過(guò)不同的媒體類(lèi)型和條件定義樣式表規(guī)則，媒體查詢(xún)讓CSS可以更精確作用于不同的媒體類(lèi)型和同一媒體的不同條件。通過(guò)這個(gè)標(biāo)簽屬性，我們可以很方便的在不同的設(shè)備下實(shí)現(xiàn)豐富的界面，特別是移動(dòng)設(shè)備，將會(huì)運(yùn)用更加的廣泛。媒體查詢(xún)能夠獲取的值如下：設(shè)備的寬和高device-width，device-heigth。渲染窗口的寬和高width，heigth。設(shè)備的手持方向，橫向還是豎向orientation(portrait|lanscape)等。畫(huà)面比例aspect-ratio點(diǎn)陣打印機(jī)等。設(shè)備比例device-aspect-ratio-點(diǎn)陣打印機(jī)等。對(duì)象顏色或顏色列表color，color-index顯示屏幕。設(shè)備的分辨率resolution。目前三頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)語(yǔ)法結(jié)構(gòu)及用法

媒體查詢(xún)有兩種使用方式，一種是在CSS樣式中內(nèi)嵌“@media”，在同一個(gè)CSS中通過(guò)不同窗口編寫(xiě)不同的樣式去選擇。另一種是使用外部樣式表的引用，在@import和link中使用“@media”，根據(jù)不同的窗口大小選擇對(duì)應(yīng)的樣式文件。這兩種方式的使用方法是一樣的。MediaQueries的使用方法如下所示：

@media設(shè)備類(lèi)型only(選取條件)not(選取條件)and(設(shè)備特性)

{樣式代碼}目前四頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)在樣式表中內(nèi)嵌@media的代碼示例如下所示：

@media(min-device-width:1024px)and(max-width:989px),(max-device-width:480px)and(orientation:landscape),(min-device-width:480px)and(max-device-width:1024px)and(orientation:portrait){樣式代碼}簡(jiǎn)寫(xiě)：@mediascreenand(max-width:640px){樣式代碼}在上面的示例代碼中，設(shè)置了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見(jiàn)寬度為989px）；屏寬在480px以及橫向（即480尺寸平行于地面）放置的手持設(shè)備；屏寬大于或等于480px小于1024px以及垂直放置設(shè)備的css樣式。從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號(hào)內(nèi)，樣式代碼為兼容設(shè)置的樣式表，包含在中括號(hào)里面。only（限定某種設(shè)備，可省略），and（邏輯與），not（排除某種設(shè)備）為邏輯關(guān)鍵字，多種設(shè)備用逗號(hào)分隔，這一點(diǎn)繼承了css基本語(yǔ)法。

目前五頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)在CSS3中的MediaQueries模塊中支持對(duì)外部樣式表的引用，使用方法類(lèi)型如下代碼：

@importurl(color.css)screenand(min-width:1000px);或：<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px)"href="link.css"rel="externalnofollow"/>/*使用link導(dǎo)入外部css文件*/簡(jiǎn)寫(xiě)：<linkrel="stylesheet"type="text/css"media="screenand(max-width:480px)href="link.css"/>

上面使用中only可省略，限定于計(jì)算機(jī)顯示器，第一個(gè)條件max-width是指渲染界面最大寬度，第二個(gè)條件max-device-width是指設(shè)備最大寬度。目前六頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)可用的設(shè)備類(lèi)型

在CSS中嵌入“@media”的方式，開(kāi)頭必須書(shū)寫(xiě)“@media”,然后指定設(shè)備類(lèi)型（上例使用screen代表電腦顯示器）。CSS中定義了10種設(shè)備類(lèi)型可以指定的值設(shè)置類(lèi)型all所有設(shè)備braille盲文，即盲人用點(diǎn)字法觸覺(jué)回饋設(shè)備embossed盲文打印機(jī)handheld手持的便攜設(shè)備print文檔打印用紙或打印預(yù)覽視圖模式projection各種投影設(shè)備screen彩色電腦顯示器屏幕speech語(yǔ)言和音頻合成器tty固定字母間距的網(wǎng)格的媒體，比如電傳打字機(jī)和終端tv電視機(jī)類(lèi)型的設(shè)備目前七頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)可用的設(shè)備特性參數(shù)

通過(guò)設(shè)備類(lèi)型可以區(qū)分使用的設(shè)備，再通過(guò)設(shè)備特性參數(shù)來(lái)設(shè)置同一設(shè)備的不同型號(hào)。例如，通過(guò)設(shè)備類(lèi)型指定電腦顯示器，再通過(guò)設(shè)備特性參數(shù)指用多大屏幕的顯示器。設(shè)備特性的書(shū)寫(xiě)方式與樣式的書(shū)寫(xiě)方式很相似，分為兩個(gè)部分，當(dāng)中由冒號(hào)分割，冒號(hào)前書(shū)寫(xiě)設(shè)備的某種特性，冒號(hào)后書(shū)寫(xiě)該特性的具體值。例如“(min-width:320px)”。CSS中的設(shè)置特性共有13種，是一個(gè)類(lèi)似于CSS屬性的集合。但與CSS屬性不同的是，大部分設(shè)備特性的指定接受min/max的前綴，用來(lái)表示大于等于或小于等于的邏輯，以此避免使用“<”和“>”這些字符。對(duì)于這13種設(shè)備特性參數(shù)的說(shuō)明如表：目前八頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)特性可指定值可用媒體類(lèi)型是否接受min/max前綴特性說(shuō)明width帶單位的長(zhǎng)度值例如：640px視覺(jué)屏幕/觸摸設(shè)備允許定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾?單位一般為px)，即瀏覽器窗口的寬度heigth帶單位的長(zhǎng)度值例如：320px視覺(jué)屏幕/觸摸設(shè)備允許定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度(單位一般為px)，即瀏覽器窗口的高度device-width帶單位的長(zhǎng)度值例如：640px視覺(jué)屏幕/觸摸設(shè)備允許定義輸出設(shè)備的屏幕可見(jiàn)寬度(單位一般為px)，即設(shè)備屏幕分辨率的寬度值device-heigth帶單位的長(zhǎng)度值例如：320px視覺(jué)屏幕/觸摸設(shè)備允許定義輸出設(shè)備的屏幕可見(jiàn)高度(單位一般為px)，即設(shè)備屏幕分辨率的高度值orientation只能指定兩個(gè)值：portrait或

landscape位圖介質(zhì)類(lèi)型不允許瀏覽器窗口的方向是縱向還是橫向，當(dāng)窗口商度大于等于寬度值是該特性值為portait（橫向），否則為landscape（豎向）aspect-ratio比例值例如16/9位圖介質(zhì)類(lèi)型允許定義’width’與’height’的比率，即瀏覽器的長(zhǎng)寬比device-aspect-ratio比例值例如16/9位圖介質(zhì)類(lèi)型允許定義’device-width’與’device-height’的比率，即設(shè)備屏幕長(zhǎng)寬比。如常見(jiàn)的顯示器比率：4/3，

16/9，16/10color整數(shù)值視覺(jué)媒體允許設(shè)備使用多少位的顏色值，如果不是彩色設(shè)備，則值等于0color-index整數(shù)值視覺(jué)媒體允許色彩表中的色彩數(shù)monochrome整數(shù)值視覺(jué)媒體允許定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備，則值等于0resolution分辨率值例如300dpi位圖介質(zhì)類(lèi)型允許定義設(shè)備的分辨率。如：96dpi，300dpi，118dpcmscan只能指定兩個(gè)值：progressive或interlace電視類(lèi)不允許定義電視類(lèi)設(shè)備的掃描方式，

progressive逐行掃描，interlace隔行掃描grid只能指定兩個(gè)值：0或1柵格設(shè)備不允許用來(lái)查詢(xún)輸出設(shè)備是否使用柵格或基于位圖。1代表是，0代表否目前九頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)可以使用and關(guān)鍵字來(lái)指定當(dāng)某種設(shè)備類(lèi)型的某種特性的值滿(mǎn)足某個(gè)條件時(shí)所使用的樣式，例如以下語(yǔ)句指定了當(dāng)設(shè)備窗口寬度小于640px時(shí)所使用的樣式：

@mediascreenand(max-width:640px){樣式代碼}

可以使用多條語(yǔ)句來(lái)將同一個(gè)樣式應(yīng)用于不同的設(shè)備類(lèi)型和設(shè)備特性中，指定方式類(lèi)似如下所示：

@mediahandheldand(min-width:360px),screenand(max-width:480px){樣式代碼}

目前十頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)

可以在表達(dá)式中加上not關(guān)鍵字或only關(guān)鍵字，not關(guān)鍵字表示對(duì)后面的表達(dá)式執(zhí)行取反操作，書(shū)寫(xiě)方法類(lèi)似如下所示：

/*樣式代碼將被使用在除便攜設(shè)備之外的其他設(shè)備或非彩色便攜設(shè)備中*/@medianothandheldand(color){樣式代碼}/*樣式代碼將被使用在非彩色設(shè)備中*/@mediaalland(notcolor){樣式代碼}

使用only關(guān)鍵字的作用是讓那些不支持MediaQueries但是能夠讀取MediaType的設(shè)備的瀏覽器將表達(dá)式的樣式隱藏起來(lái)。例如：

@mediaonlyscreenand(color){樣式代碼}

上面的語(yǔ)句對(duì)于支持MediaQueries的設(shè)備來(lái)說(shuō)，將能夠正確應(yīng)用樣式，就像only不存在一樣。對(duì)于不支持MediaQueries但能夠讀取MediaType的設(shè)備（例如IE8只支持“@mediascreen”）來(lái)說(shuō)，由于先讀到的是only而不是screen,將忽略這個(gè)樣式。對(duì)于不支持MediaQueries的瀏覽器（例如IE8之前的瀏覽器）來(lái)說(shuō)，無(wú)論是否有only,都將忽略這個(gè)樣式。目前十一頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)簡(jiǎn)單示例介紹目前十二頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)先通過(guò)一個(gè)響應(yīng)式布局實(shí)例，來(lái)了解一個(gè)響應(yīng)式布局和MediaQueries的簡(jiǎn)單應(yīng)用。在本例中，使用HTML5的結(jié)構(gòu)元素定義5個(gè)盒子。當(dāng)瀏覽器窗口尺寸不同時(shí)，頁(yè)面會(huì)根據(jù)當(dāng)前窗口的大小選擇使用不同的樣式。目前十三頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)主斷點(diǎn)主斷點(diǎn)主斷點(diǎn)320px720px1024px次斷點(diǎn)

768pxiPhoneAndroid手機(jī)橫屏iPad及某些Android平板電腦橫屏

樣式微調(diào)次斷點(diǎn)

次斷點(diǎn)

480px

640px目前十四頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)當(dāng)窗口寬度在1000px以上時(shí)，頁(yè)頭和頁(yè)腳分別在頁(yè)面的最上方和最下方整行顯示，中間主體分為三列顯示。當(dāng)窗口寬度在640px以上、1000px以下時(shí),中間的第三列隱藏。而當(dāng)窗口寬度在640px以下時(shí)，5個(gè)區(qū)塊從上往下排列顯示。在各自不同窗口大小的子樣式區(qū)域中，可以繼承全局的樣式，只要重新設(shè)置的需要改變的樣式即可。另外，有一些次要的區(qū)塊內(nèi)容為了頁(yè)面擺放合適，可以隱藏它。目前十五頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)窗口寬度在1000px以上時(shí)的頁(yè)面顯示目前十六頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)窗口寬度在640px以上，1000px以下時(shí)的頁(yè)面顯示目前十七頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)在640px以下的頁(yè)面顯示目前十八頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)在移動(dòng)設(shè)備上設(shè)置原始大小顯示目前十九頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)視

口（viewport）目前二十頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)視口（viewport）在桌面瀏覽器中，等于瀏覽器窗口。視口中的像素指CSS像素，視口大小決定頁(yè)面布局的可用寬度。視口

=

窗口目前二十一頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)移動(dòng)設(shè)備如果同樣以瀏覽器（即設(shè)備屏幕）窗口作為視口，那已有的960像素寬的頁(yè)面布局就會(huì)顯示成這樣。為此，移動(dòng)瀏覽器定義了兩個(gè)視口：

①可見(jiàn)視口和②布局視口。①可見(jiàn)視口②布局視口目前二十二頁(yè)\總數(shù)二十七頁(yè)\編于十八點(diǎn)大多數(shù)移動(dòng)瀏覽器默認(rèn)把布局視口的寬度設(shè)為：980px（IE10默認(rèn)設(shè)定為1024px）…………然后，盡可能放大可見(jiàn)視口，（布局視口寬度保持不變）以便在屏幕中顯示完整的網(wǎng)站。