一、viewport簡介
什麼是viewport?
通俗來講，移動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域。
ppk的關於三個viewport的理論
layout viewport:瀏覽器預設情況下，保證是為桌面設計的**，還是為移動端設計的**，都能正常顯示，這樣情況下把viewport設為乙個較寬的值。寬度可以通過document.documentelement.clientwidth。
visual viewport:layout viewport的寬度大於瀏覽器可視區域的寬度，所以我們還需要乙個viewport來代表瀏覽器可視區域，ppk把這個viewport叫做visual viewport。visual viewport的寬度可以通過windows.innerwidth來獲取,但在android 2,oprea mini和uc 8 中無法正確獲取。
ideal viewport:
瀏覽器覺得還是不夠，因為現在越來越多的**都會為移動裝置進行單獨的設計.所以必須還要有乙個能完美適配移動裝置的viewport。
二、media queries簡介
能夠控制不同大小的螢幕，在其顯示出的樣式，讓來自不同的裝置能夠有最佳的瀏覽體驗。
兩種使用方法？
以上兩種則一即可。
@media 方法簡介：
html5 響應式布局
一 什麼是響應式布局?響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移...
html5 響應式布局示例
響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個 概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕 移動裝置的普及，用 ...
初學HTML5 響應式柵格系統
在網頁製作中，柵格系統就是用固定的格仔進行網頁布局，是一種清晰，工整的設計風格 display用於指定彈性盒的容器，其值可以為flex 如果為行內元素，值為inline flex.flex flow是屬性flex direction和flex wrap的簡寫，用於排列彈性子元素。flex direc...