一、移动端适配方案
目前行业内流行几种适配方法
- JS根据屏幕动态计算 使用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和尺寸 动态算出当前页的rem大小 动态的修改meta标签。该方案目前也被应用在手淘首页中
三、px2rem
px2rem能动态将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
参考文章：
