在專案中px自動轉為rem

第一步安裝   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之後， 此配置不能直接寫在自定義配置項中， 必須寫在此處

第四步       在rules中加如下程式碼，css我是用到sass，所以需要引入對應的loader，不需要的可不寫。

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

}

第五步：測試  加入一下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>

如果你的執行頁面如下，就可以直接使用750設計圖裡面的真實PX值就可以啦

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

在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為需要轉換的字號
@if (unitless($px)) {
        @return pxTorem($px + 0px);
}@else if (unit($px) == em) {
        @return $px;
}
    @return ($px / $browser-default-font-size) * 1rem;
}

vue檔案中使用