推薦使用viewport方案來解決移動端適配問題。
項(xiàng)目地址：https://github.com/Ewall1106/mall
關(guān)于lib-flexible.js
Flexible方案是手淘經(jīng)過多年的摸索和實(shí)戰(zhàn)，總結(jié)出的一套移動端適配方案，附github地址：https://github.com/amfe/lib-flexible。在說明中，這個(gè)作者建議大家開始使用
viewport來代替flexible這個(gè)方案。
安裝配置
- 安裝：
$ npm install lib-flexible --save
安裝lib-flexible
-
main.js中引入：
import 'lib-flexible/flexible.js'
main.js
-
viewport設(shè)置，我們進(jìn)入index.html頁面中定義meta，該標(biāo)簽定義了用戶通過手指放大縮小無效，頁面比例始終為1:1。
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=1.0">
安裝插件
cssrem插件是一個(gè)把px轉(zhuǎn)換為rem的工具-->安裝cssrem插件。也可以使用px2rem-loader這個(gè)插件。配置
cssrem（以750*1334設(shè)計(jì)稿為例），因?yàn)?code>flexible會將設(shè)計(jì)稿分成100份（主要是為例以后能更好的兼容vh和vw），而每一份被稱為一個(gè)單位a；同時(shí)1rem單位被認(rèn)定為10a，我們可以得出：
1a = 7.5px
1rem = 75px
- 所以我們進(jìn)入
vscode的首選項(xiàng)里面，把把html的font-size設(shè)置為75px：
html font-size
