移动端postcss-px2rem配置

1、在目标项目中安装

npm install postcss-px2rem -S复制代码

2、在webpack配置中加入这个插件

plugins:[
  new webpack.LoaderOptionsPlugin({
    vue: {
      postcss: [require('postcss-px2rem')({'remUnit': 100,'baseDpr':2})]
    },
  })
]复制代码

如果用脚手架搭建的项目会有一个webpack.base.conf.js中加入，如果是自己配的直接在config.js中加入即可

remUnit: 100意思为1rem=100px，因为100比较好计算所以这里写100

3、对html的font-size进行动态设置

因为rem的原理本身就是根据html根的字体大小进行动态改变的，但是在不同大小的屏幕中html的font-size必须要进行动态变化

a、傻瓜式写法可以用media标签在全局css中写入

@media screen and (min-width: 320px) {html{font-size:312.5%;}}@media screen and (min-width: 360px) {html{font-size:351.5625%;}}@media screen and (min-width: 375px) {html{font-size:366.211%;}}@media screen and (min-width: 400px) {html{font-size:390.625%;}}@media screen and (min-width: 414px) {html{font-size:404.2969%;}}@media screen and (min-width: 440px) {html{font-size:429.6875%;}}@media screen and (min-width: 480px) {html{font-size:468.75%;}}@media screen and (min-width: 520px) {html{font-size:507.8125%;}}@media screen and (min-width: 560px) {html{font-size:546.875%;}}@media screen and (min-width: 600px) {html{font-size:585.9375%;}}@media screen and (min-width: 640px) {html{font-size:625%;}}@media screen and (min-width: 680px) {html{font-size:664.0625%;}}@media screen and (min-width: 720px) {html{font-size:703.125%;}}@media screen and (min-width: 760px) {html{font-size:742.1875%;}}@media screen and (min-width: 800px) {html{font-size:781.25%;}}@media screen and (min-width: 960px) {html{font-size:937.5%;}}复制代码

这种方法明细代码冗余，而且面对不同大小的屏幕宽度只能不断地网上增加，不能算是自适应

b、写一个固定值设置

font-size: 625%;
复制代码

625%的由来：普通浏览器默认字体大小为16px，假设1rem=100px的话，100/16=6.25

这种写法是根据浏览器的默认字体大小进行自适应的，但是如果用户自己设置了浏览器的默认字体大小，根据如上计算出来可能就会有偏差

c、在main.js中引入如下js

(function (doc, win) {    var docEl = doc.documentElement,        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',        recalc = function () {            var clientWidth = docEl.clientWidth;            if (!clientWidth) return;            if(clientWidth>=640){                docEl.style.fontSize = '100px';            }else{                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';            }        };    if (!doc.addEventListener) return;    win.addEventListener(resizeEvt, recalc, false);    doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);复制代码

4、在代码中使用

#box {
   height: 44px                //用postcss-px2rem插件配置后相当于0.44rem
   width: 100%
   font-size: 24px;/*no*/      //如果不想用插件转换可以用/*no*/标识符
}复制代码

转载于:https://juejin.im/post/5bf66282f265da61542d4338