響應式Web設計媒體查詢演示文稿目前一頁\總數二十六頁\編于十二點優選響應式Web設計媒體查詢ppt目前二頁\總數二十六頁\編于十二點1、CSS3媒體查詢

計算當前瀏覽器環境的某些方面（如窗口寬度、長寬比和方向等），來確定應用哪個CSS。2、流式網格布局對頁面布局元素使用相對CSS比例而不是絕對大小。3、流式圖像和媒體通過使用一些CSS技巧，使圖像和媒體比例適應其瀏覽器的大小約束。響應式Web設計目前三頁\總數二十六頁\編于十二點

通過不同的媒體類型和條件定義樣式表規則，媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。通過這個標簽屬性，我們可以很方便的在不同的設備下實現豐富的界面，特別是移動設備，將會運用更加的廣泛。媒體查詢能夠獲取的值如下：設備的寬和高device-width，device-heigth。渲染窗口的寬和高width，heigth。設備的手持方向，橫向還是豎向orientation(portrait|lanscape)等。畫面比例aspect-ratio點陣打印機等。設備比例device-aspect-ratio-點陣打印機等。對象顏色或顏色列表color，color-index顯示屏幕。設備的分辨率resolution。目前四頁\總數二十六頁\編于十二點語法結構及用法

媒體查詢有兩種使用方式，一種是在CSS樣式中內嵌“@media”，在同一個CSS中通過不同窗口編寫不同的樣式去選擇。另一種是使用外部樣式表的引用，在@import和link中使用“@media”，根據不同的窗口大小選擇對應的樣式文件。這兩種方式的使用方法是一樣的。MediaQueries的使用方法如下所示：

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

{樣式代碼}目前五頁\總數二十六頁\編于十二點在樣式表中內嵌@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){樣式代碼}簡寫：@mediascreenand(max-width:640px){樣式代碼}在上面的示例代碼中，設置了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見寬度為989px）；屏寬在480px以及橫向（即480尺寸平行于地面）放置的手持設備；屏寬大于或等于480px小于1024px以及垂直放置設備的css樣式。從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號內，樣式代碼為兼容設置的樣式表，包含在中括號里面。only（限定某種設備，可省略），and（邏輯與），not（排除某種設備）為邏輯關鍵字，多種設備用逗號分隔，這一點繼承了css基本語法。

目前六頁\總數二十六頁\編于十二點在CSS3中的MediaQueries模塊中支持對外部樣式表的引用，使用方法類型如下代碼：

@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導入外部css文件*/簡寫：<linkrel="stylesheet"type="text/css"media="screenand(max-width:480px)href="link.css"/>

上面使用中only可省略，限定于計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。目前七頁\總數二十六頁\編于十二點可用的設備類型

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

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

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

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

progressive逐行掃描，interlace隔行掃描grid只能指定兩個值：0或1柵格設備不允許用來查詢輸出設備是否使用柵格或基于位圖。1代表是，0代表否目前十頁\總數二十六頁\編于十二點可以使用and關鍵字來指定當某種設備類型的某種特性的值滿足某個條件時所使用的樣式，例如以下語句指定了當設備窗口寬度小于640px時所使用的樣式：

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

可以使用多條語句來將同一個樣式應用于不同的設備類型和設備特性中，指定方式類似如下所示：

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

目前十一頁\總數二十六頁\編于十二點

可以在表達式中加上not關鍵字或only關鍵字，not關鍵字表示對后面的表達式執行取反操作，書寫方法類似如下所示：

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

使用only關鍵字的作用是讓那些不支持MediaQueries但是能夠讀取MediaType的設備的瀏覽器將表達式的樣式隱藏起來。例如：

@mediaonlyscreenand(color){樣式代碼}

上面的語句對于支持MediaQueries的設備來說，將能夠正確應用樣式，就像only不存在一樣。對于不支持MediaQueries但能夠讀取MediaType的設備（例如IE8只支持“@mediascreen”）來說，由于先讀到的是only而不是screen,將忽略這個樣式。對于不支持MediaQueries的瀏覽器（例如IE8之前的瀏覽器）來說，無論是否有only,都將忽略這個樣式。目前十二頁\總數二十六頁\編于十二點簡單示例介紹目前十三頁\總數二十六頁\編于十二點先通過一個響應式布局實例，來了解一個響應式布局和MediaQueries的簡單應用。在本例中，使用HTML5的結構元素定義5個盒子。當瀏覽器窗口尺寸不同時，頁面會根據當前窗口的大小選擇使用不同的樣式。目前十四頁\總數二十六頁\編于十二點主斷點主斷點主斷點320px720px1024px次斷點

768pxiPhoneAndroid手機橫屏iPad及某些Android平板電腦橫屏

樣式微調次斷點

次斷點

480px

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

口（viewport）目前二十一頁\總數二十六頁\編于十二點視口（viewport）在桌面瀏覽器中，等于瀏覽器窗口。視口中的像素指CSS像素，視口大小決定頁面布局的可用寬度。視口

=

窗口目前二十二頁\總數二十六頁\編于十二點移動設備如果同樣以瀏覽器（即設備屏幕）窗口作為視口，那已有的960像素寬的頁面布局就會顯示成這樣。為此，移動瀏覽器定義了兩個視口：

①可見視口和②布局視口。①可見視口②布局視口目前二十三頁\總數二十六頁\編于十二點大多數移動瀏覽器默認把布局視口的寬度設為：980px（IE