美文网首页vueVUE技术与项目
vue + webpack + px2rem 把px自动转为re

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

作者: 这个前端不太冷 | 来源:发表于2019-07-30 20:55 被阅读0次

    第一步安装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之后, 此配置不能直接写在自定义配置项中, 必须写在此处
            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值就可以啦


    20180704125744981.png

    嘿嘿,上面是使用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文件中使用


    20180704130455470.png

    相关文章

      网友评论

        本文标题:vue + webpack + px2rem 把px自动转为re

        本文链接:https://www.haomeiwen.com/subject/prhorctx.html