html5的viewport與css3的媒體查詢

伴隨着移動設備的愈來愈流行，在現代社會中，可能人們手中握着移動設備的時間已經遠遠大於敲着鍵盤了，還有各類平板及將來會不斷興起的移動設備，如何讓網頁在這些設備上更好的顯示，成爲咱們不斷學習、思考的問題。

css的媒體查詢建立的響應式網站，就是針對這一問題的。

其實在css2已經支持媒體，在新的css3中更加的具體，讓咱們可以更好的書寫代碼，以保證網頁在不一樣設備上的佈局的合理，使UI顯示的更加的精緻和優美。下面咱們來舉個栗子吧：

<link mete="not screen and (width:800px)"><!--在寬度不爲800px-->

<style>

@media (max-width:479px){

/*在寬度小於479px,才生效*/

}

@media (min-width:480px) and (max-height:767px){

 /*在寬度大於480px,小於767px的屏幕裏，才生效*/

}

@media (min-width:800px) or (orientation:portrait){

/*至少寬度爲800px或方向縱向*/

}

}

</style>

若是隻是簡單的電腦中縮放顯示屏，那麼上面的css3已經已經能夠很好的知足了，但是咱們如今還要考慮一個重要的問題，在手機端顯示會不會出現問題。現實證實仍是會出現問題，手機的瀏覽器會默認網頁是爲寬屏而設計的，它會縮小整個頁面來適應屏幕的。咱們就須要用到html5的新增的viewport即「窗口」，設置這張網頁顯示的相關設置。

舉個栗子：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

width=device-width：瀏覽器將頁面寬度假設爲設備寬度，後面也能夠跟數字單位px

height：高度的設置

initial-scale：瀏覽器初始化頁面縮放比例

maximum：容許用戶縮放到的最大比例

minmum：容許用戶縮放到的最小比例

user-scalable：用戶是否能夠手動縮放