nuxt3：postcss-pxtorem

一、理解postcss

https://www.postcss.com.cn/

1.1、PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具。

1.2、增强代码可读性：

利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

1.3、将未来的CSS特性带到今天：

PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。

1.4、总结全局css：

CSS 模块 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。

1.5、避免CSS代码中的错误：

通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。

1.6、可以把px转为rem。

二、安装

pnpm add autoprefixer postcss postcss-pxtorem

三、nuxt.config.ts

    postcss: {
        plugins: {
            // 这个工具可以实现自动添加CSS3前缀
            "autoprefixer": {
              overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
            },
            'postcss-pxtorem': {
                rootValue: 37.5, // 指定转换倍率，我现在设置这个表示1rem=37.5px;
                propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
                mediaQuery: false, // 是否允许使用媒体查询，false媒体查询的代码可用，true不可用
                exclude: 'ignore',
                replace: true, // 替换包含rem的规则，而不是添加回退
                minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
                unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
                selectorBalckList: ["van"], // 匹配不被转换为rem的选择器
            },
        },
    },

四、plugins/rem.ts

export default defineNuxtPlugin(() => {
  if (process.client) {
    // 屏幕适应
    (function (win, doc) {
      if (!win.addEventListener) return
      function setFont() {
        let screenWidth = document.querySelector('html')!.offsetWidth
        const baseSize = 37.5
        const pageWidth = 750
        let fontSize = (baseSize * screenWidth) / pageWidth
        document.querySelector('html')!.style.fontSize = `${fontSize}px`
      }
      setFont()
      setTimeout(() => {
        setFont()
      }, 300)
      doc.addEventListener('DOMContentLoaded', setFont, false)
      win.addEventListener('resize', setFont, false)
      win.addEventListener('load', setFont, false)
    })(window, document)
  }
})

五、pages/rem.vue

<!-- 测试媒体查询 -->
<template>
    <div>
        <div>rem</div>
        <div class="div1">test</div>
        <div>测试</div>
    </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
div{
    font-size: 16px
}
// 大于1000
@media screen and (min-width: 1000px) {
    html {
        font-size: 16px;
    }
    body {
        font-size: 16px;
    }
// 大写的“PX”不会被转换，可以被浏览器识别为px，pc端使用大写可以实现px
    div{
        font-size: 60PX;
        color: red;
    }
}
</style>

测试通过，成功。

“px”会被插件转换为rem，实现移动端自适应布局；

“PX”不能被插件转换为rem，浏览器可以识别为普通的px，实现pc端使用px。

六、相关内容

postcss-px-to-viewport

七、欢迎交流指正，关注我，一起学习。

参考链接：

https://www.postcss.com.cn/

https://www.jianshu.com/p/9a9048bc8978