vue2,vue3项目PC端，移动端通用rem适配，简单方便

最新推荐文章于 2024-09-28 12:08:31 发布

Mister.wang

最新推荐文章于 2024-09-28 12:08:31 发布

阅读量221

点赞数 2

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/wj423028/article/details/140962911

版权

在main.js中添加如下代码即可无须下载任何插件

//判断是否是移动端
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
//适配方法
const setRem = () => {
  // 默认基准值为37.5，对应的设计稿宽度为375px
  const baseSize = isMobile? 37.5 : 128; 
  // 获取屏幕宽度
  const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
  // 设置HTML的根字体大小
  document.documentElement.style.fontSize = (screenWidth / baseSize) + 'px';
}

// 初始化设置
setRem()
// 窗口大小改变时重新设置
window.onresize = function () {
  setRem()
}