create-react-app使用postcss-pxtorem插件实现移动端自适应布局

发表于 | 分类于 |

前言

移动端响应式布局,rem方案。实现原理是根据设备宽度等比设置根元素html的fontSize. rem 则等于元素实际fontSize/根元素fontSize. 所以元素的实际fontSize比上设备的宽度是一个定值。则能保证在移动设备上视觉效果一致。
顺便提一句：当我们使用rem布局时lineHeight文字无法居中，这时候可以用table布局实现居中

实例

瓜子二手车wap端    票哆哆公众号（这个是我开发的^-^）

实现

1.运行script暴露配置
1
npm run jest
2.在模板中设置html根元素的fontSize
1
2
3
4
5
6
7
8
9
10
11
var htmlDc=document.getElementsByTagName('html')[0];
     setRootSize=function () {
       var clientWidth=document.documentElement.clientWidth||document.body.clientWidth;
       var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
       htmlDc.style.fontSize=clientWidth/3.75+'px';
       htmlDc.style.minHeight=clientHeight+'px';
     };
     setRootSize();
     window.onresize=function () {
       setRootSize();
     };
3.在webpack.config.js中加入插件
1
2
3
4
5
require('postcss-pxtorem')({
            rootValue : 100,
            selectorBlackList  : [], //过滤
            propList   : ['*'],
          })
0%