@media screen解決移動web開發的多分辨率問題

當今移動設備的發展已經愈來愈迅速，移動web開發的需求也愈來愈多多。許多大平臺、大門戶都紛紛推出了本身的移動web版網站。

隨着移動設備飛速的發展，移動產品的屏幕規格愈來愈多。從幾年前的320×240像素的屏幕，到如今1920×1080分辨率的屏幕。各類分辨率的屏幕讓前端開發的人們叫苦連連，如何使用一種有效的方式來解決各類屏幕分辨率下的用戶體驗呢？

在css2中就有media type屬性，用於判斷媒體類型。而在css3中新增了 media query屬性用於加強media type屬性。所以當css3問世後，這個問題有了新的解決辦法。media query屬性的是media type屬性的加強功能，使media type能夠進行條件判斷輸出對應的css。

media query的使用方法

1、判斷媒體類型，引用不一樣的樣式表

<link rel=」stylesheet」 media=」screen and (判斷條件)」 herf=」須要調用的樣式表文件」 />

經過設定屏幕的判斷條件，調用對應的css文件。該實例多用於整頁面不一樣風格的css調用與選取，使用該方法可能須要爲一個頁面製做多份個css文件。

2、判斷媒體類型，執行不一樣的css樣式屬性
@media screen and (max-width:240px){

.box{width:200px;}

.title{color:red;}

}

上述實例能夠出如今外部樣式表與內部樣式表中。直接在樣式表中以@media screen屬性標註媒體類型的判斷事件，在括號中寫出判斷條件爲max-width:240px；該判斷的意思是屏幕寬度大於240px則執行大括號內的樣式屬性，若是小於240px則不執行。

 

前端開拓者作了@media screen相應的判斷嘗試，並在首頁與文章列表頁加入了@media screen的功能實例。判斷樣式書寫以下：

@media screen and (min-width:1200px){.post_box{width: 45%;float: left;}.c-con{height:140px;}}

若是用戶使用分辨率寬度大於1200px的瀏覽器訪問網站，則頁面呈現爲三欄模式，以下圖：

 

若是分辨率小於1200px則頁面會呈現爲兩欄模式，以下圖：

 

建議在使用判斷時，若是隻是在樣式表內進行判斷的話，能夠修改部分重要樣式來達到修改佈局的目的。

經過@media screen與width條件判斷，能夠事先對頁面的寬度進行策劃，而後根據不一樣的頁面寬度設定不一樣的css樣式，有效的控制web頁面在各類分辨率下的樣式表先。

 

 

原文連接：http://www.frontopen.com/1221.html