Vue项目使用PostCSS做h5页面的屏幕适配

PostCSS 是一个用 JavaScript 编写的工具，用于将 CSS 转换为另一种 CSS。在做h5页面的屏幕适配时，结合 PostCSS 的一些插件能轻松实现，下面以结合 postcss-pxtorem 插件为例，详细介绍配置步骤。

1. 创建或选择 Vue 项目

如果你还没有 Vue 项目，可以使用 Vue CLI 创建一个新的项目：

npm install -g @vue/cli
vue create my-vue-project
cd my-vue-project

2. 安装 PostCSS 及相关插件

安装 postcss、postcss-loader 和之前提到的 postcss-pxtorem 插件：

npm install postcss postcss-loader postcss-pxtorem --save-dev

3. 配置 PostCSS

在项目根目录下创建或修改 postcss.config.js 文件，示例配置如下：

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5, // 根元素字体大小，根据设计稿调整，一般设置为设计稿宽度的1/10
            propList: ['*'], // 需要转换的属性，* 表示所有属性都转换
            selectorBlackList: ['.ignore-'], // 选择器黑名单，匹配到的选择器中的 px 不转换
            minPixelValue: 2 // 最小转换的像素值，小于该值的 px 不转换
        }
    }
};

不转换微小尺寸

通常来说，minPixelValue 设置为 1 或 2 是比较常见的选择。这样做的目的是避免将一些微小的尺寸（如边框宽度、阴影偏移量等）转换为 rem 单位，因为这些微小尺寸如果转换后可能会因为小数计算而导致显示上的细微差异，甚至在某些设备上出现显示异常。

4. 配置 Vue 项目中的 vue.config.js

在项目根目录下创建或修改 vue.config.js 文件，添加 css 配置项，以启用 postcss-loader：

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                postcssOptions: {
                    plugins: [
                        require('postcss-pxtorem')({
                            // 这里的配置也可以直接写在 postcss.config.js 里
                            // 如果你已经在 postcss.config.js 配置好了，这里可以省略
                        })
                    ]
                }
            }
        }
    }
};

5. 在 Vue 组件中编写 CSS

在 Vue 组件的 <style> 标签中使用 px 单位编写样式，例如：

<template>
  <div class="box">
    This is a box.
  </div>
</template>

<style scoped>
.box {
    width: 375px;
    height: 100px;
    font-size: 16px;
    background-color: lightblue;
}
</style>

6. 设置根元素字体大小

为了让 rem 单位生效，需要在项目入口文件（通常是 src/main.js）中动态设置根元素（<html>）的字体大小。可以添加以下代码：

// src/main.js
new Vue({
    render: h => h(App),
}).$mount('#app');

// 设置根元素字体大小
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
window.addEventListener('resize', () => {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
});

上述代码根据屏幕宽度动态设置根元素的字体大小，并且在窗口大小改变时重新设置，确保在不同屏幕尺寸下都能正常适配。

7. 运行项目

运行以下命令启动开发服务器：

npm run serve

现在，当你打开浏览器查看项目时，Vue 组件中使用 px 单位编写的样式会被自动转换为 rem 单位，从而实现手机端屏幕适配。

通过以上步骤，你就可以在 Vue 项目中成功应用配置好的 PostCSS 进行屏幕适配。如果需要其他功能，还可以结合更多的 PostCSS 插件进行配置。