vue + webpack + px2rem 把px自动转为rem

在项目中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之后，此配置不能直接写在自定义配置项中，必须写在此处
vue: {
postcss: [require('postcss-px2rem')({ remUnit: 75, propWhiteList: [] })]
},
})
],

第四步在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文件中使用

vue + webpack + px2rem 把px自动转为rem

猜你喜欢