不同分辨率屏幕的适配

分辨率适配

Vue

发布日期: 2023-11-04

更新日期: 2025-05-09

文章字数: 192

阅读时长: 1 分

阅读次数: 16997

使用两个转换库

postcss-pxtorem

none

postcss-pxtorem 插件，可以从像素单位生成 rem 单位

amfe-flexible

none

amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10
PC端设计稿为1920时：1920/10 = 192
移动端设计稿为750时：750/10 = 75

在项目中配置

1、安装依赖

npm install postcss-pxtorem
npm install amfe-flexible

2、vue.config.js中配置

const postCssPxToRem = require('postcss-pxtorem')
// import postCssPxToRem from 'postcss-pxtorem'

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 192, // 设计稿尺寸 1rem 的大小
            propList: ['*'] // 需要转换的属性列表，*表示全部转换
          })
        ]
      }
    }
  }
}

或vite.config.ts中配置

import postCssPxToRem from 'postcss-pxtorem'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: '192',
          propList: ['*']
        })
      ]
    }
  }
})