隨著互聯網時代的發展，我們對網頁布局有了新的要求，大氣，美觀，能夠在不同的設備上呈現令人煥然一新的效果。此時，一個全新的概念—響應式布局應運而生。它的誕生為我們的移動端布局帶來了很大的便利。因此學習響應式頁面布局勢在必行！

html5/css3響應式布局介紹及設計流程，利用css3的media query媒體查詢功能。移動終端一般都是對css3支持比較好的高級瀏覽器不需要考慮響應式布局的媒體查詢media query兼容問題

一、響應式頁面布局的概念

響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽器而誕生的。

二、響應式布局的優勢

響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

一個普通的自適應顯示的三欄網頁，當你用不同的終端來查看這個頁面的時候，他會根據幾種終端來顯示不同的樣式，在電腦上是三列，在pad上應該也是 三列，在大屏手機上是三行，在屏幕小于320的手機上只顯示主要內容，隱藏掉了次要元素。(這里關于響應式布局還有個比較好的消息，就是拖動瀏覽器也可以 觸發判斷條件，測試的時候你不需要去找一堆手機，只要把自己的瀏覽器窗口縮小到一定尺寸就可以了。)

我們認識下media query屬性吧。

@media screen and(min-width: 320px) and (max-width : 479px)

就從這個條件語句開始介紹，media屬性后面跟著的是一個 screen 的媒體類型(上面說過的十種媒體類型之一)。然后用 and 關鍵字來連接條件(其他關鍵字還有 not， only，看字面大家能理解，就不多說。)，然后括號里就是一個媒體查詢語句，稍微懂點css的同學都能看懂，這個條件語句意思是在大于320小于479 的分辨率下所激活的樣式表。

這個語句，就是響應式布局的基礎應用了。在判斷終端分辨率大小之后，賦予不同的樣式進去，就像我們的例子里

@media screen and(max-width : 320px){

body{...}

}

@media screen and(min-width: 800px) and (max-width: 1024px){

body{...}

}

至于要判斷多少種分辨率，完全取決于你產品的需求，常見的分辨率有手機，平板(注意這些終端是存在 橫屏 豎屏 區別的,這個下一篇里提)，桌面顯示器。自己為自己所面對的終端定制樣式。

一般大于960的顯示器都可以用默認樣式而不必在媒體查詢里判斷了。有一種情況除外，就是高像素比的終端，比如 iphone4以上的retina屏，一個iphone5的小小的屏幕(iphone的屏幕是真小啊)，他的分辨率竟然達到了1136*640，幾乎等于 一個筆記本的分辨率。你在這樣小的物理顯示界面打開一個網頁，他用1136的分辨率來顯示，結果就是所有元素小的可憐。

在面對這種分辨率精細的終端，我們有另外一個條件查詢語句device-pixel-ratio。

比如例子里的

@media only screen and(-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and(min-device-pixel-ratio: 2)

就是判斷終端的像素比是2的話，所渲染的樣式。iphone4以上像素比是2，高分辨率Andriod設備像素比是1.5，例子里只有像素比為2的查詢，1.5的或者其他比例方法一樣，前面用的是幾種瀏覽器的私有屬性，最后一種是通用屬性，

@media only screen and(-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and(min-device-pixel-ratio: 2)

網站名稱：html5/css3響應式布局介紹及設計流程
分享地址：http://m.newbst.com/news47/312197.html

成都網站建設公司_創新互聯，為您提供外貿網站建設、網站維護、微信小程序、品牌網站制作、Google、靜態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯