vue配置rem、vm

最新推荐文章于 2023-02-21 10:51:27 发布

Panda-6

最新推荐文章于 2023-02-21 10:51:27 发布

阅读量527

点赞数 2

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

本文链接：https://blog.csdn.net/m0_48949881/article/details/122294775

版权

本文介绍了在Vue项目中如何手动配置及使用rem单位，包括在特定文件中编写代码实现全局应用。同时，讲解了如何借助postcss-pxtorem和lib-flexible库自动化配置rem，以适应不同屏幕宽度。此外，还提到了安装和配置vm依赖，并在配置rem后，如何处理和删除原有rem相关代码。

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

一、rem

1.手配rem

这边代码写在public文件夹下的index.html文件里，这样可以直接全局使用。

	// 封装一个根据屏幕尺寸自动改变html的font-size大小的函数
function rem() {
   
    //  获取html的宽度
    let htmlW = document.documentElement.clientWidth;
    // 获取body的宽度
    let bodyW = document.body.clientWidth;
    // 兼容处理
    let W = htmlW || bodyW;
    // 设置html的font-size大小
    // 因为设计图尺寸是750，所以平分，这样*100之后，1rem就等于100px;
    document.documentElement.style.fontSize = (W / 750 * 100) &#