第一次做移動端網頁開發，接觸到的幾個單位vh/vw/rem，記錄一下。
vh：相對可見視區的高度
vw：相對可見視區的寬度
rem：相對根元素的字型大小
「視區」所指為瀏覽器內部的可視區域大小，即window.innerwidth/window.innerheight大小，不包含工作列標題欄以及底部工具欄的瀏覽器區域大小
height:100vh
在做視區覆蓋時，使用height:100vh，在chorme開發者工具切換各裝置時，各尺寸螢幕完美適配。但是使用手機chrome瀏覽器檢視時，發現頁面可以滑動，感覺高度好像高了一樣（其實並沒有，chrome沒有將100vh高度調整為視口高度變化時螢幕的可見部分，而是將100vh設定為瀏覽器的高度，從而在位址列顯示或者隱藏時會顯示不同，其他手機瀏覽器也有類似的問題），很不舒服。所以在移動端盡量避免使用100vh，改為js設定視口高度:window.innerheight
rem布局
關於rem，一般都是設定iphone6的font-size為16px（在scale=1時，font-size=16）。可以動態設定來適配其他裝置。
根元素fontsize公式：width/fontsize = basewidth/basefontsize
// 其中，basewidth, basefontsize是選為基準的裝置寬度及其根元素大小，width, fontsize為所求裝置的寬度及其根元素大小，來自一文
在vw布局中，盒子的高寬、內外邊距、字型大小等都可以使用vw。可以使用scss語法定義乙個函式來轉換px為vw。關於vw某些機型無法適配的問題，可以參考這篇文章：
移動端 網頁布局
固定寬度布局 為網頁設定乙個固定的寬度，通常以 px 做為長度單位，常見於 pc 端網頁。流式布局 為網頁設定乙個相對的寬度，通常以百分比做為長度單位。柵格化布局 將網頁寬度人為的劃分成均等的長度，然後排版布局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來劃分成均等的長度。響應式布局...
移動端網頁製作
一 header資訊的設定 自適應 1 宣告資訊 2 編碼設定 3 移動裝置特別設定 重要宣告！meta content width device width,user scalable no name viewport viewport說明 該設定可使我們開發出的頁面 產品 大小可適應各種高階移動...
移動端開發
一。響應式設計好處 1.一套專案 2.一套開發環境 3.乙個url 4.內容所見即所得 5.不會因為終端公升級而導致不可用 做法 布局百分比寬度 容器浮動 二。viewport引數的最佳組合 三。mediaquery書寫思路 先寫高解析度樣式。理由 1.設計師設計原型往往首先基於寬屏，甚至不會給出適...