Postcss 插件postcss-pxtorem

感谢
执行命令 安装插件postcss-pxtorem

npm install postcss-pxtorem -D

postcss.config.js 新建package.json同一个目录下，文件内容如下

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ['*']
    }
  }
}

新建libs文件夹并且创建rem.js文件

// 设置 rem 函数
function setRem() {
    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / 20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem()
}

main.js文件添加如下

import '../libs/rem.js’;

结果如下：

使用直接输入px回车，会转自动转成em

后续

尽量使用百分比

util.scss

$baseFontSize : 200 !default;

@mixin rounded($value...) {
    -webkit-border-radius: $value;
    -moz-border-radius: $value;
    -ms-border-radius: $value;
    border-radius: $value;
}

@mixin transition($value...) {
    -webkit-transition: $value;
    -moz-transition: $value;
    -ms-transition: $value;
    transition: $value;
}

@mixin transform($value...) {
    -webkit-transform: $value;
    -moz-transform: $value;
    -ms-transform: $value;
    transform: $value;
}

@mixin animation($value...) {
    -webkit-animation: $value;
    -moz-animation: $value;
    -ms-animation: $value;
    animation: $value;
}

@mixin keyframes ($value...) {
    @keyframes #{$value} {
        @content;
    }
    @-moz-keyframes #{$value} {
        @content;
    }
    @-webkit-keyframes #{$value} {
        @content;
    }
    @-o-keyframes #{$value} {
        @content;
    }
}

@mixin table-equal ($children : li) {
    display: table;
    table-layout: fixed;
    width: 100%;
    $childrenEle: li div p a span strong;
    @if index ($childrenEle, $children) {
    >#{$children} {
        display: table-cell;
    }
    } @else {
    .#{$children} {
        display: table-cell;
    }
  }
}

@mixin txtColGradient($value...) {
    background-image: linear-gradient($value);
    background-image: -webkit-linear-gradient($value);
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}

@mixin flex () {
    display: -webkit-flex;
    display: flex;
    display: -webkit-box;
}

%justify { text-align: justify; text-justify: distribute-all-lines; -webkit-text-justify: distribute-all-lines; -moz-text-justify: distribute-all-lines;
    &:after { content: ''; width: 100%; display: inline-block; font-size: 0; line-height: 0;}
}

@function torem($value) {
    @return ($value / $baseFontSize * 1rem);
}

@function toPer($value) {
    @return percentage($value);
}

@mixin ellipsis1{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@mixin ellipsis2{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

rem.js

function setRem() {
    var baseFontSize = 100;
    var baseWidth = 375;
    var clientWidth = document.documentElement.clientWidth || window.innerWidth || 375;
    var innerWidth = clientWidth;
    var rem = 100;
    if (innerWidth >= 414) {
        rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.98)
    } else {
        rem = Math.floor(innerWidth / baseWidth * baseFontSize)
    }
    console.log("11", rem);
    var dhtml = document.querySelector("html");
    dhtml.style.fontSize = rem + "px"
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem()
}

main.js引入

import '../libs/rem.js';

vue相关文件引入