vue框架根据屏幕分辨率及缩放自适应

最新推荐文章于 2025-06-06 14:37:10 发布

原创最新推荐文章于 2025-06-06 14:37:10 发布 · 910 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章讲述了如何在package.json中配置依赖项，包括amfe-flexible和postcss-pxtorem，并在main.js中引入。接着，详细介绍了postcss.config.js的配置，使用autoprefixer自动补全CSS3前缀，并利用postcss-pxtorem进行px转rem的单位转换，以适应不同屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置package.json

"dependencies": {
    "amfe-flexible": "^2.2.1",
    "postcss-pxtorem": "^5.1.1"
 },

配置main.js
```
import 'amfe-flexible'
```

增加配置postcss.config.js

module.exports = () => ({
  plugins: [
    // autoprefixer 自动补齐 CSS3 前缀，适配不同浏览器
    require('autoprefixer')({
      overrideBrowserslist: [
        'last 10 versions', // 所有主流浏览器最近10版本用
      ],
    }),
    require('postcss-pxtorem')({
      rootValue: 192.0, //设计稿元素尺寸/10，这里设计稿宽度为1920
      propList: ['*'], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      unitPrecision: 3, //保留rem小数点多少位
      selectorBlackList: [], //则是一个对css选择器进行过滤的数组，比如你设置为['el-']，那所有el-类名里面有关px的样式将不被转换，这里也支持正则写法。
      replace: true,
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      // minPixelValue: 3, //px小于3的不会被转换
    }),
  ],
})