使用rem作為尺寸單位，通過js來根據螢幕寬度來控制rem的大小，從而達到適配的目的；
使用vm，即視口viewport，來作為尺寸大小。
首先，將flexible.js引入到專案中
// flexible.js
(function flexible (window, document)
else
}setbodyfontsize();
// set 1rem = viewwidth / 10
function setremunit ()
setremunit()
// reset rem unit on page resize
window.addeventlistener('resize', setremunit);
window.addeventlistener('pageshow', function (e)
})// detect 0.5px supports
if (dpr >= 2)
docel.removechild(fakebody);
}}(window, document))
其次，新建乙個_function.scss，建立乙個將px轉換為rem的函式 px2rem。
// _function.scss
@function px2rem($px, $base-font-size: 75px) to be in pixels, attempting to convert it into pixels for you";
@return px2rem($px + 0px); // that may fail.
} @else
if (unit($px) == rem)
@return ($px / $base-font-size) * 1rem;
}
最後，在每乙個scss檔案中，都要引入 _function.scss，在寫尺寸的時候，直接量取設計稿中對應的單元的尺寸即可，寫法如下：
.wrap
根據css3規範，視口單位主要包括以下4個：
vw : 1vw 等於視口寬度的1%
vh : 1vh 等於視口高度的1%
vmin : 選取 vw 和 vh 中最小的那個
vmax : 選取 vw 和 vh 中最大的那個
視口單位區別於%單位，視口單位是依賴於視口的尺寸，根據視口尺寸的百分比來定義的；而%單位則是依賴於元素的祖先元素。
佔坑，待續。。。
三種適配方案
使用flexible實現手淘h5頁面的終端適配
再聊移動端頁面的適配
如何在vue專案中使用vw實現移動端適配
移動端 移動端頁面適配方案
這是mdn上的解釋 這個單位代表根元素的 font size 大小 例如 元素的font size 當用在根元素的font size上面時 它代表了它的初始值 也就是說，rem單位取值的大小和根元素html的font size取值直接相關。它跟html元素之間得關係為 html的fontsize值 ...
移動端適配方案及布局
這三個meta必須引入，建立乙個flexble.js，使用rem來適配頁面布局，並在index.html 中引入 designwidth 設計稿的實際寬度值，需要根據實際設定 maxwidth 製作稿的最大寬度值，需要根據實際設定 這段js的最後面有兩個引數記得要設定，乙個為設計稿實際寬度，乙個為製...
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...