移动端项目适配

最新推荐文章于 2023-06-25 15:02:08 发布

卷不动的小毛

最新推荐文章于 2023-06-25 15:02:08 发布

阅读量390

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_58519519/article/details/127247647

版权

这是vue+vant的一个移动端项目，因为打开是pc端的页面，所以要对移动端页面进行适配

1.在public静态资源里，新建一个文件夹js，js里面新建文件rem.js，这个文件是用来实现rem布局（用处：适应不同的设备窗口）

请添加图片描述

2.在rem.js里写入以下代码

function remSize() {
    //获取设备的宽度
    var deviceWidth = document.documentElement.clientWidth || window.innerWidth
    if (deviceWidth >= 750) {
        deviceWidth = 750
    }
    if (deviceWidth <= 320) {
        deviceWidth = 320
    }
    document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
        // 设置字体大小
    document.querySelector('body').style.fontSize = 0.3 + 'rem'
}
// 调用函数
remSize()
    // 当窗口变化时也调用这个函数
window.onresize = function() {
    remSize()
}