Vue項目使用PostCSS做h5頁面的屏幕適配的配置步驟

更新時間：2025年02月14日 09:27:03 作者：中遠

PostCSS 是一個用 JavaScript 編寫的工具,用于將 CSS 轉換為另一種 CSS,在做h5頁面的屏幕適配時,結合 PostCSS 的一些插件能輕松實現(xiàn),下面以結合 postcss-pxtorem 插件為例,詳細介紹配置步驟,需要的朋友可以參考下

1. 創(chuàng)建或選擇 Vue 項目

如果你還沒有 Vue 項目，可以使用 Vue CLI 創(chuàng)建一個新的項目：

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

在項目根目錄下創(chuàng)建或修改 postcss.config.js 文件，示例配置如下：

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5, // 根元素字體大小，根據(jù)設計稿調整，一般設置為設計稿寬度的1/10
            propList: ['*'], // 需要轉換的屬性，* 表示所有屬性都轉換
            selectorBlackList: ['.ignore-'], // 選擇器黑名單，匹配到的選擇器中的 px 不轉換
            minPixelValue: 2 // 最小轉換的像素值，小于該值的 px 不轉換
        }
    }
};

不轉換微小尺寸

通常來說，minPixelValue 設置為 1 或 2 是比較常見的選擇。這樣做的目的是避免將一些微小的尺寸（如邊框寬度、陰影偏移量等）轉換為 rem 單位，因為這些微小尺寸如果轉換后可能會因為小數(shù)計算而導致顯示上的細微差異，甚至在某些設備上出現(xiàn)顯示異常。

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

在項目根目錄下創(chuàng)建或修改 vue.config.js 文件，添加 css 配置項，以啟用 postcss-loader：

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                postcssOptions: {
                    plugins: [
                        require('postcss-pxtorem')({
                            // 這里的配置也可以直接寫在 postcss.config.js 里
                            // 如果你已經(jīng)在 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）中動態(tài)設置根元素（<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';
});

上述代碼根據(jù)屏幕寬度動態(tài)設置根元素的字體大小，并且在窗口大小改變時重新設置，確保在不同屏幕尺寸下都能正常適配。