移動端postcss-px2rem配置

一、在目標項目中安裝

npm install postcss-px2rem -S複製代碼

二、在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

三、對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);複製代碼

四、在代碼中使用

#box {
   height: 44px                //用postcss-px2rem插件配置後至關於0.44rem
   width: 100%
   font-size: 24px;/*no*/      //若是不想用插件轉換能夠用/*no*/標識符
}複製代碼