第2講 響應式Web設計-媒體查詢

1、響應式Web設計 1、CSS3媒體查詢 計算當前瀏覽器環(huán)境的某些方面（如窗口寬度、長寬比和方向等），來確定 應用哪個CSS。 2、流式網(wǎng)格布局 對頁面布局元素使用相對CSS比例而不是絕對大小。 3、流式圖像和媒體 通過使用一些CSS技巧，使圖像和媒體比例適應其瀏覽器的大小約束。 通過不同的媒體類型和條件定義樣式表規(guī)則，媒體查詢讓CSS可以更精確作 用于不同的媒體類型和同一媒體的不同條件。通過這個標簽屬性，我們可以很方 便的在不同的設備下實現(xiàn)豐富的界面，特別是移動設備，將會運用更加的廣泛。 媒體查詢能夠獲取的值如下： 設備的寬和高device-width，device-heigth。 渲染窗口的

2、寬和高width，heigth。 設備的手持方向，橫向還是豎向orientation(portrait|lanscape) 等。 畫面比例aspect-ratio點陣打印機等。 設備比例device-aspect-ratio-點陣打印機等。 對象顏色或顏色列表color，color-index顯示屏幕。 設備的分辨率resolution。 語法結(jié)構(gòu)及用法語法結(jié)構(gòu)及用法 媒體查詢有兩種使用方式， 一種是在CSS樣式中內(nèi)嵌“media”，在同一個 CSS中通過不同窗口編寫不同的樣式去選擇。 另一種是使用外部樣式表的引用， 在import和link中使用“media”，根據(jù)不 同的窗口大小選擇對應的

3、樣式文件。這兩種方式的使用方法是一樣的。Media Queries的使用方法如下所示： media 設備類型設備類型 only (選取條件) not (選取條件) and (設備特性設備特性) 樣式代碼 在樣式表中內(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 (orie

4、ntation:portrait) 樣式代碼 簡寫：簡寫： media screen and (max-width:640px) 樣式代碼 在上面的示例代碼中，設置了電腦顯示器分辨率（寬度）大于或等于1024px（并 且最大可見寬度為989px）；屏寬在480px以及橫向（即480尺寸平行于地面）放 置的手持設備；屏寬大于或等于480px小于1024px以及垂直放置設備的css樣式。 從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號內(nèi)，樣式代 碼為兼容設置的樣式表，包含在中括號里面。only（限定某種設備，可省略）， and（邏輯與），not（排除某種設備）為邏輯關(guān)鍵字，多種設備用

5、逗號分隔，這 一點繼承了css基本語法。 在CSS3中的Media Queries模塊中支持對外部樣式表的引用， 使用方法類型如下 代碼： import url(color.css) screen and (min-width: 1000px); 或：或： /*使用link導入外部css文件*/ 簡寫：簡寫： 上面使用中only可省略，限定于計算機顯示器，第一個條件max-width是指 渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。 可用的設備類型可用的設備類型 在CSS中嵌入“media”的方式， 開頭必須書寫“media”,然后指定設備類 型（上例使用sc

6、reen代表電腦顯示器）。CSS中定義了10種設備類型 可以指定的值可以指定的值設置類型設置類型 all所有設備 braille盲文，即盲人用點字法觸覺回饋設備 embossed盲文打印機 handheld手持的便攜設備 print文檔打印用紙或打印預覽視圖模式 projection各種投影設備 screen彩色電腦顯示器屏幕 speech語言和音頻合成器 tty固定字母間距的網(wǎng)格的媒體，比如電傳打字機和終端 tv電視機類型的設備 可用的設備特性參數(shù)可用的設備特性參數(shù) 通過設備類型可以區(qū)分使用的設備，再通過設備特性參數(shù)來設置同一設備的不同 型號。例如，通過設備類型指定電腦顯示器， 再通過設備特

7、性參數(shù)指用多大屏幕 的顯示器。設備特性的書寫方式與樣式的書寫方式很相似， 分為兩個部分，當中 由冒號分割， 冒號前書寫設備的某種特性， 冒號后書寫該特性的具體值。例如 “(min-width:320px)”。CSS中的設置特性共有13種， 是一個類似于CSS屬性的 集合。但與CSS屬性不同的是，大部分設備特性的指定接受min/max的前綴， 用 來表示大于等于或小于等于的邏輯，以此避免使用“”這些字符。對于 這13種設備特性參數(shù)的說明如表： 特性特性可指定值可指定值可用媒體類型可用媒體類型 是否接受是否接受 min/max前綴前綴 特性說明特性說明 width 帶單位的長度值 例如：640px

8、 視覺屏幕/觸摸設備允許 定義輸出設備中的頁面可見區(qū)域?qū)挾?單位一般為px)，即瀏覽器窗口 的寬度 heigth 帶單位的長度值 例如：320px 視覺屏幕/觸摸設備允許 定義輸出設備中的頁面可見區(qū)域高度(單位一般為px)，即瀏覽器窗口 的高度 device-width 帶單位的長度值 例如：640px 視覺屏幕/觸摸設備允許 定義輸出設備的屏幕可見寬度(單位一般為px)，即設備屏幕分辨率的 寬度值 device-heigth 帶單位的長度值 例如：320px 視覺屏幕/觸摸設備允許 定義輸出設備的屏幕可見高度(單位一般為px) ，即設備屏幕分辨率的 高度值 orientation 只能指定兩

9、個值： portrait 或 landscape 位圖介質(zhì)類型不允許 瀏覽器窗口的方向是縱向還是橫向， 當窗口商度大于等于寬度值是該 特性值為portait（橫向），否則為landscape（豎向） aspect-ratio 比例值 例如16/9 位圖介質(zhì)類型允許定義width與height的比率，即瀏覽器的長寬比 device-aspect-ratio 比例值 例如16/9 位圖介質(zhì)類型允許 定義device-width與device-height的比率，即設備屏幕長寬比。如常 見的顯示器比率：4/3， 16/9，16/10 color整數(shù)值視覺媒體允許設備使用多少位的顏色值，如果不是彩色設

10、備，則值等于0 color-index整數(shù)值視覺媒體允許色彩表中的色彩數(shù) monochrome整數(shù)值視覺媒體允許 定義在一個單色框架緩沖區(qū)中每像素包含的單色原件個數(shù)。如果不是 單色設備，則值等于0 resolution 分辨率值 例如300dpi 位圖介質(zhì)類型允許定義設備的分辨率。如：96dpi，300dpi，118dpcm scan 只能指定兩個值： progressive 或interlace 電視類不允許定義電視類設備的掃描方式， progressive逐行掃描，interlace隔行掃描 grid 只能指定兩個值： 0 或1 柵格設備不允許用來查詢輸出設備是否使用柵格或基于位圖。1代表

11、是，0代表否 可以使用and關(guān)鍵字來指定當某種設備類型的某種特性的值滿足某個條件時所使用 的樣式， 例如以下語句指定了當設備窗口寬度小于640px時所使用的樣式： media screen and (max-width: 640px) 樣式代碼 可以使用多條語句來將同一個樣式應用于不同的設備類型和設備特性中， 指定方式類似如下所示： media handheld and (min-width:360px), screen and (max-width: 480px) 樣式 代碼 可以在表達式中加上not關(guān)鍵字或only關(guān)鍵字， not關(guān)鍵字表示對后面的表達式執(zhí)行取反操作， 書 寫方法類似如下所

12、示： /* 樣式代碼將被使用在除便攜設備之外的其他設備或非彩色便攜設備中 */ media not handheld and (color) 樣式代碼 /* 樣式代碼將被使用在非彩色設備中 */ media all and (not color) 樣式代碼 使用only關(guān)鍵字的作用是讓那些不支持Media Queries但是能夠讀取Media Type的設備的瀏覽器 將表達式的樣式隱藏起來。 例如： media only screen and (color) 樣式代碼 上面的語句對于支持Media Queries的設備來說，將能夠正確應用樣式， 就像only不存在一樣。 對于不支持Media

13、Queries但能夠讀取Media Type的設備（例如IE8只支持“media screen”）來 說， 由于先讀到的是only而不是screen, 將忽略這個樣式。對于不支持Media Queries的瀏覽器（例 如IE8之前的瀏覽器）來說， 無論是否有only, 都將忽略這個樣式。 先通過一個響應式布局實例，來了解一個響應式布局和Media Queries的簡單應 用。 在本例中，使用HTML5的結(jié)構(gòu)元素定義5個盒子。當瀏覽器窗口尺寸不同時， 頁面會根據(jù)當前窗口的大小選擇使用不同的樣式。 主斷點主斷點主斷點 320px720px1024px 次斷點 768px iPhone Androi

14、d 手機橫 屏 iPad及某 些Android 平板電腦 橫屏 樣式微調(diào) 次斷點 次斷點 480px 640px 當窗口寬度在1000px以上時， 頁頭和頁腳分別在頁面的最上方和最下方整行 顯示，中間主體分為三列顯示。 當窗口寬度在640px以上、1000px以下時, 中間的第三列隱藏。 而當窗口寬度在640px以下時，5個區(qū)塊從上往下排列顯示。 在各自不同窗口大小的子樣式區(qū)域中，可以繼承全局的樣式， 只要重新設置的 需要改變的樣式即可。另外，有一些次要的區(qū)塊內(nèi)容為了頁面擺放合適，可以 隱藏它。 窗口寬度在1000px以上時的頁面顯示 窗口寬度在640px以上，1000px以下時的頁面顯示 在

15、640px以下的頁面顯示 視 口（viewport） 視口（viewport）在桌面瀏覽器中，等于瀏覽器 窗口。視口中的像素指CSS像素，視口大小決定頁 面布局的可用寬度。 視口 = 窗口 移動設備如果同樣以瀏覽器（即設備屏幕）窗口作為視口，那已有 的960像素寬的頁面布局就會顯示成這樣。為此，移動瀏覽器定義了 兩個視口： 可見視口和布局視口。 可見視口 布局視口 大多數(shù)移動瀏覽器 默認把布局視口的 寬度設為：980px （IE10默認設定為 1024px） 然后，盡可能 放大可見視口， （布局視口寬度保 持不變）以便在屏 幕中顯示完整的網(wǎng) 站。 所以即使在頁面中已經(jīng)寫好了頁面在小尺寸窗口中運行的樣式，移動設備上的 瀏覽器也不會使用這個樣式， 而是選擇窗口寬度為980px時所使用的樣式。 所 以我們需要在移動設備上設置原始