使用postcss-pxtorem插件适配移动端

使用postcss-pxtorem插件适配移动端

1.安装插件postcss-pxtorem

npm install postcss-pxtorem --save-dev

2.webpack配置

// vue.config.js
module.exports = {
  css: {
        loaderOptions: {
          postcss: {
                plugins: [
                    // 兼容浏览器，添加前缀
                    require('autoprefixer')({
                        overrideBrowserslist: [
                            'Android 4.1',
                            'iOS 7.1',
                            'Chrome > 31',
                            'ff > 31',
                            'ie >= 8',
                            //'last 10 versions', // 所有主流浏览器最近10版本用
                        ],
                        grid: true,
                    }),
                    require('postcss-pxtorem')({
                        rootValue: 192, // 根标签font-size，默认1920px宽度下192px
                        exclude: /(node_module|public)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module|src)/
                        propList: ['*'], //是一个存储哪些将被转换的属性列表，这里设置为["*"]全部，假设需要仅对边框进行设置，可以写]['*','!border*']
                        //selectorBlackList :['.box'],//，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
                        replace: true, //替换包含rems的规则。
                        mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
                        minPixelValue: 0, //设置要替换的最小像素值(3px会被转rem)。 默认 0
                    }),
                ],
            },
        }
  }
}

3.添加rem.js

// rem.js
// 是否是移动端访问
const isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(
    navigator.userAgent
);
// const isMobile = true;
console.log('是否是移动端访问', isMobile);
const baseSize = isMobile ? 280 : 192; // postcss-pxtorem的基底值，如果是移动端则稍微放大比例
window.baseSize = baseSize;
// 设置rem 函数
function setRem() {
    //计算出 比例来 当前分辨率的宽%设计稿宽度
    const scale = window.screen.width / 1920;
    // 给根元素设置font-size
    document.documentElement.style.fontSize =
        baseSize * Math.min(scale, 2) + 'px';
}
/**
 * 转化行间样式为rem
 * @param {string} px
 * @returns
 */
const px2rem = px => {
    if (/%/gi.test(px)) {
        // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
        return px;
    } else {
        return parseFloat(px) / 192 + 'rem'; // 和postcss-pxtorem插件配置的rootValue值对应
    }
};
setRem();
window.addEventListener('resize', () => {
    setRem();
});

export { px2rem };

4.项目入口文件main.js引入rem.js

// main.js
import '@/utils/rem.js'

注意：行间样式不会自动转化，需要手动调用

5.行间样式需要手动转化

<template>
  <div :style="styleObj"></div>
</template>

<script>
import { px2rem } from '@/utils/rem.js'
const styleObj = {
  width: px2rem('100px'),
  height: px2rem('100px')
}
</script>