实现rem布局

最新推荐文章于 2024-06-03 23:42:36 发布

炫酷小少爷

最新推荐文章于 2024-06-03 23:42:36 发布

阅读量508

点赞数

分类专栏：仿网易云移动端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45796382/article/details/129542544

版权

仿网易云移动端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

项目开始我们首先配置响应式布局，在目录下创建一个js文件夹，创建rem.js

思路

1、利用window.onresize调整窗口大小事件，就触发remSize()函数，来实现移动端适配

2、获取浏览器宽度,对于ie5/6/7/8用document.documentElement.clientWidth，其他用window.innerWidth

3、定义1rem的大小

// rem.js用来实现响应式布局


// 定义函数remSize()来实现适配
function remSize(){
  // 1、获取浏览器宽度，如果大于750就按照750计算，如果小于320就按320计算
  // 确定浏览器窗口的尺寸对于ie5/6/7/8用document.documentElement.clientWidth，其他用window.innerWidth
 var deviceWidth = document.documentElement.clientWidth || window.innerWidth
 if(deviceWidth>=750){
  deviceWidth=750

 }
 if(deviceWidth<=320){
  deviceWidth=320

 }
  // 2、定义1rem的大小
  // 750-->1rem=100px,375px-->1rem=50px
  document.documentElement.style.fontSize=(deviceWidth/7.5)+'px'
  // 设置字体大小
  document.querySelector('body').style.fontSize=0.3+'rem'
}
// 一打开窗口就启用
remSize()

// window.onresize调整窗口大小事件,改变窗口大小也启用
window.onresize=function(){
  remSize()
}