antd-mobile屏幕适配方案: flexible+px2r

一、移动端适配方案

目前行业内流行几种适配方法

• 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

参考文章：

• react 配置 rem（px转rem适配手机端

• react工程搭建系列之---移动端适配与antd-mobile高清适配方案