vue3+ts+vite pc端屏幕适配方案

最新推荐文章于 2025-05-07 17:00:22 发布

落笔映浮华H

最新推荐文章于 2025-05-07 17:00:22 发布

阅读量4.7k

点赞数

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_39238200/article/details/126769717

版权

最近在做vue3+ts+vit的一个项目 ui设计稿是1920 ,而电脑的屏幕分辨率有很多，这里采用px转rem的方式，在不同的分辨率下都可以适配

目前没办法实现百分百适配，如果有更好的方式欢迎留言

1 、安装插件

npm install postcss-loader postcss-pxtorem --save
npm install autoprefixer --save

2、新建postcss.config.js文件跟page.json 同级目录下，并写入一下的代码

module.exports = {
  'plugins': {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'not ie <= 11',  //不考虑IE浏览器
        'ff >= 30', //仅新版本用“ff>=30
        '> 1%',//  全球统计有超过1%的使用率使用“>1%”;
        'last 2 versions', // 所有主流浏览器最近2个版本
      ],
      grid: true ,// 开启grid布局的兼容(浏览器IE除外其他都能兼容grid，可以关闭开启)
    },
    'postcss-pxtorem': {
      rootValue: 192, // 设计稿宽度除以 10，  开头大写的Px 不转换 => height: 100Px, 内联样式不