nuxt3：postcss-pxtorem

╰半夏微凉° 2024-03-27 11:15 21阅读 0赞

**一、理解postcss**

[https://www.postcss.com.cn/][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 模块][CSS] 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。

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

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

1.6、可以把px转为rem。

**二、安装**

> pnpm add autoprefixer postcss postcss-pxtorem

![120ead8079294635bc54538620c67de2.png][]

**三、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.postcss.com.cn]

[https://www.jianshu.com/p/9a9048bc8978][https_www.jianshu.com_p_9a9048bc8978]

[https_www.postcss.com.cn]: https://www.postcss.com.cn/
[Autoprefixer]: https://github.com/postcss/autoprefixer
[PostCSS Preset Env]: https://preset-env.cssdb.org/
[cssdb]: https://cssdb.org/
[CSS]: https://github.com/css-modules/css-modules
[stylelint]: https://stylelint.io/
[120ead8079294635bc54538620c67de2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2061e847225b4641a315e0c9507cdc84.png
[https_www.jianshu.com_p_9a9048bc8978]: https://www.jianshu.com/p/9a9048bc8978