第一步安裝postcss-px2rem插件

npm install   postcss-px2rem postcss --save  

第二步 在 webpack.base.conf.js中 引入

const webpack = require('webpack')
const px2rem = require('postcss-px2rem')
const postcss = require('postcss')

第三步 在module中添加如下代碼

 plugins: [
    new webpack.LoaderOptionsPlugin({
        // webpack 2.0之后， 此配置不能直接寫在自定義配置項(xiàng)中， 必須寫在此處
        vue: {
            postcss: [require('postcss-px2rem')({ remUnit: 75, propWhiteList: [] })]
        },
    })
  ],

第四步 ， 在rules中加如下代碼，css我是用到sass，所以需要引入對(duì)應(yīng)的loader，不需要的可不寫。

{
        test: /\.(css|less|scss)(\?.*)?$/,
        loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
}

第五步：測(cè)試 加入一下css

div{
  width: 750px;
  height: 200px;
  font-size:28px;
}

到此為止，px2rem 就算配置完成了，但是要想在頁面中使用，我建議還是在index.html中加入

<script>
  (function(d,f){var s=d.document;var c=s.documentElement;var m=s.querySelector('meta[name="viewport"]');var n=s.querySelector('meta[name="flexible"]');var a=0;var r=0;var b=0;var l;var e=f.flexible||(f.flexible={});if(n){var j=n.getAttribute("content");if(j){var q=j.match(/initial\-dpr=([\d\.]+)/);var h=j.match(/maximum\-dpr=([\d\.]+)/);if(q){a=parseFloat(q[1]);r=parseFloat((1/a).toFixed(2))}if(h){a=parseFloat(h[1]);r=parseFloat((1/a).toFixed(2))}}}if(!a&&!r){var p=d.navigator.appVersion.match(/android/gi);var o=d.navigator.appVersion.match(/iphone/gi);var k=d.devicePixelRatio;if(k>=3&&(!a||a>=3)){a=3}else{if(k>=2&&(!a||a>=2)){a=2}else{a=1}}r=1/a}c.setAttribute("data-dpr",a);m=s.createElement("meta");m.setAttribute("name","viewport");m.setAttribute("content","width=device-width, initial-scale="+r+", maximum-scale="+r+", minimum-scale="+r+", user-scalable=no");if(c.firstElementChild){c.firstElementChild.appendChild(m)}else{var g=s.createElement("div");g.appendChild(m);s.write(g.innerHTML)}function i(){var u=c.getBoundingClientRect().width;if(u/a>540){u=540*a}var w=u/10;c.style.fontSize=w+"px";e.rem=d.rem=w;var v=parseFloat(c.style.fontSize),t=parseFloat(window.getComputedStyle(c).getPropertyValue("font-size"));console.log("flexible.refreshRem: fontSize && finalFontSize => ",v,t);if(v!==t){c.style.fontSize=v*(v/t)+"px";console.log("flexible.refreshRem.fixed: fontSize  => ",c.style.fontSize)}}d.addEventListener("resize",function(){clearTimeout(l);l=setTimeout(i,300)},false);d.addEventListener("pageshow",function(t){if(t.persisted){clearTimeout(l);l=setTimeout(i,300)}},false);if(s.readyState==="complete"){s.body.style.fontSize=12*a+"px"}else{s.addEventListener("DOMContentLoaded",function(t){s.body.style.fontSize=12*a+"px"},false)}i();e.dpr=d.dpr=a;e.refreshRem=i;e.rem2px=function(u){var t=parseFloat(u)*this.rem;if(typeof u==="string"&&u.match(/rem$/)){t+="px"}return t};e.px2rem=function(u){var t=parseFloat(u)/this.rem;if(typeof u==="string"&&u.match(/px$/)){t+="rem"}return t}})(window,window["lib"]||(window["lib"]={}));
</script>

如果你的運(yùn)行頁面如下，就可以直接使用750設(shè)計(jì)圖里面的真實(shí)PX值就可以啦

20180704125744981.png

嘿嘿，上面是使用px2rem來做的適配，還有一種方式以sass為基礎(chǔ)的適配效果

在index.html中
<script>
  (function(d,f){var s=d.document;var c=s.documentElement;var m=s.querySelector('meta[name="viewport"]');var n=s.querySelector('meta[name="flexible"]');var a=0;var r=0;var b=0;var l;var e=f.flexible||(f.flexible={});if(n){var j=n.getAttribute("content");if(j){var q=j.match(/initial\-dpr=([\d\.]+)/);var h=j.match(/maximum\-dpr=([\d\.]+)/);if(q){a=parseFloat(q[1]);r=parseFloat((1/a).toFixed(2))}if(h){a=parseFloat(h[1]);r=parseFloat((1/a).toFixed(2))}}}if(!a&&!r){var p=d.navigator.appVersion.match(/android/gi);var o=d.navigator.appVersion.match(/iphone/gi);var k=d.devicePixelRatio;if(k>=3&&(!a||a>=3)){a=3}else{if(k>=2&&(!a||a>=2)){a=2}else{a=1}}r=1/a}c.setAttribute("data-dpr",a);m=s.createElement("meta");m.setAttribute("name","viewport");m.setAttribute("content","width=device-width, initial-scale="+r+", maximum-scale="+r+", minimum-scale="+r+", user-scalable=no");if(c.firstElementChild){c.firstElementChild.appendChild(m)}else{var g=s.createElement("div");g.appendChild(m);s.write(g.innerHTML)}function i(){var u=c.getBoundingClientRect().width;if(u/a>540){u=540*a}var w=u/10;c.style.fontSize=w+"px";e.rem=d.rem=w;var v=parseFloat(c.style.fontSize),t=parseFloat(window.getComputedStyle(c).getPropertyValue("font-size"));console.log("flexible.refreshRem: fontSize && finalFontSize => ",v,t);if(v!==t){c.style.fontSize=v*(v/t)+"px";console.log("flexible.refreshRem.fixed: fontSize  => ",c.style.fontSize)}}d.addEventListener("resize",function(){clearTimeout(l);l=setTimeout(i,300)},false);d.addEventListener("pageshow",function(t){if(t.persisted){clearTimeout(l);l=setTimeout(i,300)}},false);if(s.readyState==="complete"){s.body.style.fontSize=12*a+"px"}else{s.addEventListener("DOMContentLoaded",function(t){s.body.style.fontSize=12*a+"px"},false)}i();e.dpr=d.dpr=a;e.refreshRem=i;e.rem2px=function(u){var t=parseFloat(u)*this.rem;if(typeof u==="string"&&u.match(/rem$/)){t+="px"}return t};e.px2rem=function(u){var t=parseFloat(u)/this.rem;if(typeof u==="string"&&u.match(/px$/)){t+="rem"}return t}})(window,window["lib"]||(window["lib"]={}));
</script>

sass文件中

$browser-default-font-size: 37.5px !default;
//$browser-default-font-size: 75px !default;

@function pxTorem($px){//$px為需要轉(zhuǎn)換的字號(hào)
    @if (unitless($px)) {
        @return pxTorem($px + 0px);
    }@else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $browser-default-font-size) * 1rem;
}

vue文件中使用

20180704130455470.png