vue项目的PC端不同分辨率的适配

关注

原创最新推荐文章于 2026-08-25 21:31:58 发布 940 阅读 AI 写同款· GEO 优化 ›

vue项目PC端如何适配不同分辨率屏幕本文为优快云博主「楚猴修」的原创文章原文链接：https://blog.youkuaiyun.com/weixin_43607164/article/details/100512220 我只是记录下防止以后遇到弄丢配置前言项目构建：基于vue-cli3构建，使用postcss-px2rem px2rem-loader进行rem适配实现原理：每次打包，webpack通过使用插件postcss-px2rem，帮我们自动将px单位转换成rem单位前方有坑：UI框架部分组件使用JavaScript将css作为内联阅读详情

vue项目的PC端不同分辨率的适配

安装npm lib-flexible --save
在main.js中引入

import './utils/lib-flexible/flexible'

    因为需要修改flexible.js的代码，所以把node-modules的依赖复制到utils文件夹

  function refreshRem() {
        var width = docEl.getBoundingClientRect().width
        if (width / dpr > 540) {
            width = width * dpr
        }
        var rem = width / 10
        docEl.style.fontSize = rem + 'px'
        flexible.rem = win.rem = rem
    }

安装npm postcss-px2rem --save
vue脚手架3.0需要在vue.config.js文件夹中添加配置

 css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 192
                    })
                ]
            },
            scss: {
                prependData: `@import "~@/styles/mixin.scss";`
            }
        }
    }