一、移動端適配方案
目前行業(yè)內流行幾種適配方法
- JS根據屏幕動態(tài)計算 使用js判斷頁面寬度算出頁面應有的font-size
- 媒體查詢 使用媒體查詢 來兼容不同尺寸屏幕 設置不同尺寸下的rem大小
- flex布局 CSS3中提出的新布局方案 移動端的兼容性較好
二泵督、flexible
使用rem作為移動端尺寸單位替代px连舍，那么1rem=？px
我們采用手淘團隊在flexible方案泡仗，1rem= 75px。flexible方案中在iphone6中的顯示結果猜憎。設計圖以iphone 6尺寸為模版娩怎，iphone 6邏輯像素：375 x 667；物理像素：750 x 1134胰柑； Scale Factor：2x截亦。
flexible方案核心就是根據屏幕的dpr和尺寸 動態(tài)算出當前頁的rem大小 動態(tài)的修改meta標簽。該方案目前也被應用在手淘首頁中
三柬讨、px2rem
px2rem能動態(tài)將px轉換成rem值
四崩瓤、安裝lib-flexible和px2rem
npm i lib-flexible postcss-px2rem-exclude --save
五、配置webpack.config.js
修改webpack.config.js 踩官，首先引入postcss-px2rem-exclude
const px2rem = require('postcss-px2rem-exclude');
找到處理postcss-loader的地方添加
px2rem({remUnit:75,exclude: /node_modules/i})
webpack.config
webpack.config
六却桶、index.js 中引入lib-flexible
import "lib-flexible"
七、index.html中配置meta
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
八蔗牡、運行項目
npm start
px自動轉換成rem
SelectionNumber.js
SelectionNumber.less
九肾扰、注意
樣式要寫在less文件中畴嘶，如果在標簽或組件上寫內聯樣式，px2rem無法自動將px轉換成rem
參考文章：
