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

最新推荐文章于 2024-05-14 17:46:26 发布

yang_web

最新推荐文章于 2024-05-14 17:46:26 发布

阅读量783

点赞数 1

分类专栏： pc适配文章标签： vue

本文链接：https://blog.csdn.net/yang_web/article/details/116203002

版权

pc适配专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中实现不同分辨率的适配，通过引入flexible.js库进行rem单位设置，并结合postcss-px2rem插件将px转换为rem。关键步骤包括安装相关依赖、修改flexible.js和vue.config.js配置。

摘要由CSDN通过智能技术生成

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";`
            }
        }
    }