Vue项目使用PostCSS做h5页面的屏幕适配的配置步骤
作者：中远
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 插件进行配置。
到此这篇关于Vue项目使用PostCSS做h5页面的屏幕适配的配置步骤的文章就介绍到这了,更多相关Vue PostCSS做h5页面屏幕适配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！