vue3版本實現h5自適應佈局

萤火之森發表於2024-11-21
VueH5

amfe-flexible 和 postcss-pxtorem 可以一起使用來實現移動端的適配效果。

參考的頁面地址

vite.config.js配置 
import pxtorem from 'postcss-pxtorem';
export default defineConfig({
  plugins: [
    vue()
  ],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 75, // 這裡寫設計稿的寬度/10即可，例如設計稿寬度是750px就寫75
          // vant預設是37.5，如果是使用了vant的話可以像下面這樣寫
          // rootValue(res) {
          //   return res.file.indexOf("vant") !== -1 ? 37.5 : 75;
          // },
          propList: ['*'], // 需要轉換的屬性，預設轉換所有屬性
          selectorBlackList: [] // CSS選擇器黑名單，防止部分選擇器被轉換
          exclude: /\/node_modules\//i, // 忽略包檔案轉換rem
        })
      ]
    }
  }
});

遇到的問題
解決vue中安裝postcss-pxtorem外掛，報錯“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”

參考連結

postcss-pxtorem排除特定檔案和目錄

排除特定頁面

點選檢視程式碼 
module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            "rootValue": 192,
            selectorBlackList: [".ivu"],
            minPixelValue: 2,
            "propList": ["*"],
            exclude: function(file) {
                // 排除 src/view/home2 目錄
                return /src[\\/]view[\\/]home2/.test(file);
            }
        }
    }
}

只轉換特定檔案

點選檢視程式碼 
module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            "rootValue": 192,
            selectorBlackList: [".ivu"],
            minPixelValue: 2,
            "propList": ["*"],
            exclude: function(file) {
                // 排除 不是 src/view/home2 目錄的檔案
                return !/src[\\/]view[\\/]home2/.test(file);
            }
        }
    }
}

相關文章