CSS基礎(chǔ)教程 -- 媒體查詢屏幕適配

響應(yīng)式布局
	
Media Query 的使用方法
在上例中， 我們使用Media Queries來根據(jù)3種不同尺寸的窗口使用3種不同的樣式。通過不同的媒體類型和條件定義樣式表規(guī)則，媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用于表達(dá)”大于或等于”和”小與或等于”。如：width會(huì)有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規(guī)則上，也可以被用在HTML和XML中。通過這個(gè)標(biāo)簽屬性，我們可以很方便的在不同的設(shè)備下實(shí)現(xiàn)豐富的界面，特別是移動(dòng)設(shè)備，將會(huì)運(yùn)用更加的廣泛。媒體查詢能夠獲取的值如下：
	設(shè)備的寬和高device-width，device-heigth顯示屏幕/觸覺設(shè)備。
	渲染窗口的寬和高width，heigth顯示屏幕/觸覺設(shè)備。
	設(shè)備的手持方向，橫向還是豎向orientation(portrait|lanscape)和打印機(jī)等。
	畫面比例aspect-ratio點(diǎn)陣打印機(jī)等。
	設(shè)備比例device-aspect-ratio-點(diǎn)陣打印機(jī)等。
	對(duì)象顏色或顏色列表color，color-index顯示屏幕。
	設(shè)備的分辨率resolution。

	語法結(jié)構(gòu)及用法

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

@media 設(shè)備類型 only (選取條件)  not (選取條件)  and  (設(shè)備特性)，設(shè)備二 { 樣式代碼 }

	在CSS3中的Media Queries模塊中支持對(duì)外部樣式表的引用， 使用方法類型如下代碼：

@import url(color.css) screen and (min-width: 1000px);                /*使用@import導(dǎo)入css文件*/
或：
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />   /*使用link導(dǎo)入外部css文件*/
簡(jiǎn)寫：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)  href="link.css" />

	上面使用中only可省略，限定于計(jì)算機(jī)顯示器，第一個(gè)條件max-width是指渲染界面最大寬度，第二個(gè)條件max-device-width是指設(shè)備最大寬度。在樣式表中內(nèi)嵌@media的代碼示例如下所示：

@media screen (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { 樣式代碼 }
簡(jiǎn)寫：
@media screen and (max-width:640px)  { 樣式代碼 }
在上面的示例代碼中，設(shè)置了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見寬度為989px）；屏寬在480px及其以下手持設(shè)備；屏寬在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基本語法。

	可用的設(shè)備類型

在上面的語法中，例如在CSS中嵌入“@media”的方式， 開頭必須書寫“@media”,然后指定設(shè)備類型（上例使用screen代表電腦顯示器）。CSS中定義了10種設(shè)備類型，可以指定的值與該值所代表的設(shè)備類型如表1-20所示：
表1-20 在Media Queries中可以指定的值與該值所代表的設(shè)備類型
可以指定的值	設(shè)置類型
All	所有設(shè)備
Braille	盲文，即盲人用點(diǎn)字法觸覺回饋設(shè)備
embossed	盲文打印機(jī)
handheld	手持的便攜設(shè)備
Print	文檔打印用紙或打印預(yù)覽視圖模式
projection	各種投影設(shè)備
Screen	彩色電腦顯示器屏幕
Speech	語言和音頻合成器
Tty	固定字母間距的網(wǎng)格的媒體，比如電傳打字機(jī)和終端
Tv	電視機(jī)類型的設(shè)備

	可用的設(shè)備特性參數(shù)

通過設(shè)備類型可以區(qū)分使用的設(shè)備，再通過設(shè)備特性參數(shù)來設(shè)置同一設(shè)備的不同型號(hào)。例如，通過設(shè)備類型指定電腦顯示器， 再通過設(shè)備特性參數(shù)指用多大屏幕的顯示器。設(shè)備特性的書寫方式與樣式的書寫方式很相似， 分為兩個(gè)部分，當(dāng)中由冒號(hào)分割， 冒號(hào)前書寫設(shè)備的某種特性， 冒號(hào)后書寫該特性的具體值。例如“(min-width:320px)”。CSS中的設(shè)置特性共有13種， 是一個(gè)類似于CSS屬性的集合。但與CSS屬性不同的是，大部分設(shè)備特性的指定接受min/max的前綴， 用來表示大于等于或小于等于的邏輯，以此避免使用“<”和“>”這些字符。對(duì)于這13種設(shè)備特性參數(shù)的說明如表1-21所示：
	表1-21 13種設(shè)備特性的說明
特性	可指定值	可用媒體類型	是否接受
min/max前綴	特性說明
width	帶單位的長度值
例如：640px	視覺屏幕/觸摸設(shè)備	允許	定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾?單位一般為px)，即瀏覽器窗口的寬度
heigth	帶單位的長度值
例如：320px	視覺屏幕/觸摸設(shè)備	允許	定義輸出設(shè)備中的頁面可見區(qū)域高度(單位一般為px)，即瀏覽器窗口的高度
device-width	帶單位的長度值
例如：640px	視覺屏幕/觸摸設(shè)備	允許	定義輸出設(shè)備的屏幕可見寬度(單位一般為px)，即設(shè)備屏幕分辨率的寬度值
device-heigth	帶單位的長度值
例如：320px	視覺屏幕/觸摸設(shè)備	允許	定義輸出設(shè)備的屏幕可見高度(單位一般為px) ，即設(shè)備屏幕分辨率的高度值
orientation	只能指定兩個(gè)值：
portrait 或 landscape	位圖介質(zhì)類型	不允許	瀏覽器窗口的方向是縱向還是橫向， 當(dāng)窗口商度大于等于寬度值是該特性值為portait（橫向），否則為landscape（豎向）
aspect-ratio	比例值
例如16/9	位圖介質(zhì)類型	允許	定義’width’與’height’的比率，即瀏覽器的長寬比
device-aspect-ratio	比例值
例如16/9	位圖介質(zhì)類型	允許	定義’device-width’與’device-height’的比率，即設(shè)備屏幕長寬比。如常見的顯示器比率：4/3， 16/9，16/10
color	整數(shù)值	視覺媒體	允許	設(shè)備使用多少位的顏色值，如果不是彩色設(shè)備，則值等于0
color-index	整數(shù)值	視覺媒體	允許	色彩表中的色彩數(shù)
monochrome	整數(shù)值	視覺媒體	允許	定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備，則值等于0
resolution	分辨率值
例如300dpi	位圖介質(zhì)類型	允許	定義設(shè)備的分辨率。如：96dpi，300dpi，118dpcm
scan	只能指定兩個(gè)值：
progressive 或interlace	電視類	不允許	定義電視類設(shè)備的掃描方式， progressive逐行掃描，interlace隔行掃描
grid	只能指定兩個(gè)值：
0 或1	柵格設(shè)備	不允許	用來查詢輸出設(shè)備是否使用柵格或基于位圖。1代表是，0代表否

可以使用and關(guān)鍵字來指定當(dāng)某種設(shè)備類型的某種特性的值滿足某個(gè)條件時(shí)所使用的樣式， 例如以下語句指定了當(dāng)設(shè)備窗口寬度小于640px時(shí)所使用的樣式：

@media screen and (max-width: 640px) { 樣式代碼 }

	可以使用多條語句來將同一個(gè)樣式應(yīng)用于不同的設(shè)備類型和設(shè)備特性中， 指定方式類似如下所示：
	
@media handheld and (min-width:360px), screen and (max-width: 480px) { 樣式代碼 }

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

/* 樣式代碼將被使用在除便攜設(shè)備之外的其他設(shè)備或非彩色便攜設(shè)備中 */
@media not handheld and (color) { 樣式代碼 }
/* 樣式代碼將被使用在非彩色設(shè)備中 */
@media all and (not color) { 樣式代碼 }
	使用only關(guān)鍵字的作用是讓那些不支持Media Queries但是能夠讀取Media Type的設(shè)備的瀏覽器將表達(dá)式的樣式隱藏起來。 例如：

@media only screen and (color) { 樣式代碼 }
	
	上面的語句對(duì)于支持Media Queries的設(shè)備來說，將能夠正確應(yīng)用樣式， 就像only不存在一樣。對(duì)于不支持Media Queries但能夠讀取Media Type的設(shè)備（例如IE8只支持“@media screen”）來說， 由于先讀到的是only而不是screen, 將忽略這個(gè)樣式。對(duì)于不支持Media Queries的瀏覽器（例如IE8之前的瀏覽器）來說， 無論是否有only, 都將忽略這個(gè)樣式。
在移動(dòng)設(shè)備上設(shè)置原始大小顯示

	在iPhone系列和iPod touch使用的是Safari瀏覽器， 支持前面介紹的媒體查詢表達(dá)式。 例如，使用iPhone分辨率是320px × 480px 去訪問我們前面的布局示例，卻不是我們想看到的結(jié)果， 并不是從上到下排列顯示， 而是和電腦顯示器訪問的布局是一樣的。為什么會(huì)這樣？因?yàn)樵趇Phone中使用的Safari瀏覽器在進(jìn)行頁面顯示時(shí)是將窗口的寬度作為980px進(jìn)行顯示的， 因?yàn)樘嗑W(wǎng)頁是按照800px左右標(biāo)準(zhǔn)進(jìn)行制作的， 所以Safari瀏覽器默認(rèn)按照980px的寬度來顯示，就可以正常顯示絕大多數(shù)的網(wǎng)頁了。所以即使在頁面中已經(jīng)寫好了頁面在小尺寸窗口中運(yùn)行的樣式， iPhone中的Safari瀏覽器也不會(huì)使用這個(gè)樣式， 而是選擇窗口寬度為980px時(shí)所使用的樣式。 所以我們需要在移動(dòng)設(shè)備上設(shè)置原始大小顯示和是否縮放的聲明。是在頁面的頭部<head></head>之間加上下面這樣的語句∶

<meta name="viewport" content="width=device-width; initial-scale=1.0" />
或
<meta name="viewport" content="width=600px " />
	 meta 標(biāo)簽的viewport屬性是在移動(dòng)設(shè)備上設(shè)置原始大小顯示和是否縮放的聲明。可以使用的參數(shù)設(shè)置如下∶
	width ： viewport的寬度 
	height ： viewport的高度 
	initial-scale ： 初始的縮放比例 
	minimum-scale ： 允許用戶縮放到的最小比例 
	maximum-scale ： 允許用戶縮放到的最大比例 
	user-scalable ： 用戶是否可以手動(dòng)縮放

如果在頁面中已經(jīng)準(zhǔn)備好了在小尺寸的窗口中使用的樣式， 并且有可能在iPhone或iPod touch中被打開時(shí)，請(qǐng)不要忘記了加入<meta>標(biāo)簽并在標(biāo)簽中寫入指定的窗口寬度。其實(shí)還可以通過viewport把自己冒充成更寬的屏幕。

本文為 H5EDU 機(jī)構(gòu)官方 HTML5培訓(xùn) 教程，主要介紹：CSS基礎(chǔ)教程 —— 媒體查詢屏幕適配