響應式布局產品用戶體驗這么差，你老板知道嗎？
隨著網民生活水平的提高，電腦和手機屏幕越來越大，對于產品的用戶體驗會要求越來越多，這必然導致行業內各公司的產品競爭越來越烈。
如果你經常關注到一些門戶網站，比如淘寶、樂視等， 發現他們現在的網站布局不同分辨率下有著不同的效果，這種技術也是以后的一種趨向了，不僅僅是在PC端，而在我們的移動端，也是如此�，F在人手基本一部智能機器，分辨率也是很多種，如何在不同分辨率下，給用戶帶去更好的體驗，作為前端人員應該多花點心思了。在項目過程中，我們經常會被產品以及測試人員問到 類似下面的問題：
> 為什么用三星S4和蘋果4/5錯位、換行，圖片質量太差?
> 為什么我用筆記本和臺式電腦上瀏覽，效果不一樣?
> 能不能保證在不同分辨率下內容都能充滿屏幕啊?
.....
針對以上問題，我們引入Media Queries來解決。你可以針對不同media類型設置表達式，根據不同的條件設置不同的樣式。例如你可以為大屏幕設置一種樣式，為mobile設置另外一種 樣式。這個功能相當強大，你可以不修改頁面內容的情況下，為不同設備提供不同的樣式效果。
下面讓我們詳細講下如何應用Media Queries吧!
Media Queries
打開Demo頁面，調整瀏覽器的大小，查看頁面布局變化情況。
Max Width
當頁面視圖區域小于600px寬度的時候，css會被使用到。
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}}
你也可以使用下面的方式，在頁面的中引用外部css文件。
Min Width
當視圖區域大于900px寬度的時候，css會被使用到。
@media screen and (min-width: 900px) {
.class {
background: #666;
}}
多個 Media Queries
你可以把多個media queries組合在一起，當視圖區域寬度在600px到900px之間的時候，會使用下面的css。
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}}
設備Width
下面的css會在 max-device-width為480px的時候使用，例如iphone。
注意：max-device-width指的是設備實際分辨率，max-width指的是可是區域尺寸。
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}}
針對 iPhone 4
下面的時針對iphone4的css。
針對 iPad
你也可以在ipad上檢查定位(portrait 或者 landscapse)。
針對Internet Explorer的Media Queries
因為ie8以及之前版本的ie瀏覽器不支持media query，你需要使用JavaScript的hack計較解決問題。下面是一些解決方案：
CSS Tricks - 使用jquery判斷瀏覽器尺寸
The Man in Blue - 使用Javascript
jQuery Media Queries 插件
示例站點
你可以使用支持media query的瀏覽器訪問下面的站點，例如：Firefox, Chrome, 和 Safari�？梢圆榭此麄冡槍g覽器寬度所做的布局響應。
1、新版淘寶首頁
淘寶首頁現在中間部分布局是：左中右，其中左邊導航是固定寬度的，中間和右邊使用了“media query”使得在不同分辨率下采用響應式布局，如下：
默認尺寸[1190px]：
中等尺寸[1009px]：
小尺寸[740px]：
2、Hicksdesign
大尺寸: 3 列sidebar
小尺寸: 2 列sidebar (中間的sidebar跑到了左邊)
更小尺寸: 1 列sidebar (最右邊的跑到了logo下面)
最小尺寸: 沒有sidebar (logo 和 右側的sidebar 上移，其他sidebar 下移)
3、Colly
頁面布局根據瀏覽器的可視區域，在1列、2列和4列之間切換。
4、A List Apart
大尺寸：導航在上不部, 1行圖片
中等尺寸：導航在左邊, 3列圖片
小尺寸：導航在上部，logo沒有背景圖片, 3列圖片
5、Tee Gallery
他和之前的Colly有點像，不同點在于它的圖片會根據頁面布局的變化，進行縮放。這里使用的技巧就是，對圖片使用百分比寬度，代替固定寬度，例如：width=100%。
總而言之，Media Query目前在移動端應用很多，雖然在PC端有些局限性，但以后是一個趨向，我們應該更多的去研究它，目的是讓我們的項目擁有更好的用戶體驗。
我們需要注意到，針對mobile做了一個css，并不意味著我們的站點對mobile設備就是優化的。對mobile設備進行優化，網站圖片和html代碼同樣需要縮小尺寸，這樣才有益于加載。media query做到的只是設計展現，而不是優化操作。
最后只想說，一個好的產品，必須具備好的用戶體驗。更多精彩敬請關注Web前端之家:www.greencircleart.com吧!
相關熱詞：響應式布