前面我們分享 移動web開發基礎-rem布局 的時候提到了兩個方案。方案的最終目的都是為了形成乙個「流單位」。
方案一是通過**查詢給html設定font-size，密集的斷點設定形成「流單位」。
方案二是通過js指令碼根據裝置顯示屏大小動態計算出根元素字型大小，這個計算結果幾乎是連續的「流單位」。
兩個方案的對比，我們常用的當然也是建議的方案是第二個。
目前來看，方案二存在乙個問題是js和html沒有得到解耦，這裡有乙個視口單位vw天生就是「流單位」。
如果對視口相關知識點不熟悉的話可以閱讀 移動web開發基礎-viewport。
根據css3規範，視口單位主要包括以下4個：
vw : 1vw 等於視口寬度的1%
vh : 1vh 等於視口高度的1%
vmin : 選取 vw 和 vh 中最小的那個
vmax : 選取 vw 和 vh 中最大的那個
視口單位區別於%單位，視口單位是依賴於視口的尺寸，根據視口尺寸的百分比來定義的；而%單位則是依賴於元素的祖先元素。
目前常用的瀏覽器版本都是相容該單位的，正說明我們可以開始使用視口單位來實現適配布局了。
（以下都以iphone 6的尺寸為例）
方案一：
最簡單的方案就是所有的布局元素及屬性都用vw來做單位，對應關係是：
設計稿 750px——>100vw
那我們書寫時計算：(x/750)*100vw
sass:
$vw_base
: 750;
@function
vw($px)
html設定font-size形成「流單位」，這樣就不再需要js來動態計算根元素字型大小。
如果以前你習慣了約定750px設計稿的根元素字型大小為100px的話，你可以直接設定：
//750px設計稿
html
//640px設計稿
html
//1080px設計稿
html
/* 設計稿寬度為750px,根字型大小為100px */
:root
html
@media screen and (
min-width
: 750px)
body
}body
// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
$vw_fontsize
: 75; // iphone 6尺寸的根元素大小基準值
@function
rem($px)
// 根元素大小使用 vw 單位
$vw_design
: 750;
html
@media screen and (
min-width
: 540px) }
// body 也增加最大最小寬度限制，避免預設100%寬度的 block 元素跟隨 body 而過大過小
body
移動端vw單位適配
一.專案中配置postcssrc.js，同時安裝好對應的外掛程式 module.exports 解決 import引入路徑問題 postcss url 該外掛程式主要用來處理檔案，比如檔案 字型檔案等引用路徑的處理.autoprefixer 自動處理瀏覽器字首，不用在乙個個加字首啦 postcss ...
移動Web開發基礎概念
2 視口 viewport 3 css屬性之box sizing 1.1 解析度以物理畫素作為基準，不同裝置的物理畫素單位大小不同 1.2 物理畫素 裝置畫素 物理畫素只與裝置有關 1.3 css畫素 邏輯畫素 實際開發中使用的畫素 1.4 裝置畫素比 dpr dpr 物理畫素 css畫素 dpr ...
移動Web開發基礎 比例盒子
上篇在移動web開發基礎 百分比 flex布局方案中說到了比例盒子的實現，因為在移動端，需要適應各種螢幕寬度的裝置，所以我們的以及其他一些元素需要根據螢幕寬度自適應的等比例縮放，這裡就需要用到比例盒子的布局方法。接下來讓我們一起來了解下實現比例盒子的幾種方法吧！這裡會介紹四種實現方式，分別是用css...