大屏适配2

之前写过一篇适配的文章，主要是用rem + vh vw实现的；

接触新项目，使用pxtorem来了一次，发现更丝滑了。推荐这种适配的方法，整个项目适用。

原理就是，把你写的所有属性 px 自动给转成 rem，设计稿多少就写多少，爽了;

方法

1. 安装 postcss-pxtorem
2. 创建配置文件，如下。
3. 重启项目
4. 开撸代码

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue: 192, // 设计稿宽度的1/ 10
      propList: ["*", "!border"], // 除 border 外所有px 转 rem
      // selectorBlackList: [".el-"] // 过滤掉.el-开头的class，不进行rem转换
    },
  },
};

坑点

1. 写在行内样式不会被识别
2. 通过props传值的或者ref定义，设置style不会被识别（其实就是设置了行内样式）。 但是也有解决办法，例如，如果封装的组件是从父组件传进来的 width height。可以这样：

<template>
  <div
    class="card-box"
    :style="{   //行内样式
      height: px2rem(cardHeight),
      width: px2rem(cardWidth),
    }"
  >
  </div>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
  cardHeight: String,
  cardWidth: String,
});
//动态写一个，也可以注册到全局
const px2rem = (px) => {
  return parseFloat(px) / 192 + "rem";//和上面配置的rootValue一样
};
</script>