vue移动端rem适配

最新推荐文章于 2024-07-12 01:53:44 发布

--北海道的夏天不会说再见--

最新推荐文章于 2024-07-12 01:53:44 发布

阅读量175

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lonsole/article/details/120884102

版权

rem单位自适应布局 viewport 媒体查询前端响应式设计

关键词由CSDN通过智能技术生成

// public/js/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'
  // 设计稿是750px
  // 设置1半的宽度，那么就是375px
  // 1rem == 100px的设计稿宽度
  // 表达一半的宽度就是3.75rem
}

remSize()
// 当窗口发生变化是调用该函数
window.onresize = function() {
  remSize()
}

// public/index.html
<script src="<%= BASE_URL %>js/rem.js"></script>