H5适配之 viewport、rem

is今夕

已于 2023-01-29 22:31:05 修改

阅读量451

点赞数

分类专栏：前端 # 适配文章标签：前端

于 2021-10-14 16:28:05 首次发布

本文链接：https://blog.csdn.net/the_love_story/article/details/120766846

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

适配

2 篇文章 0 订阅

订阅专栏

Viewport元标签是HTML中用于控制移动设备上网页显示的重要元素，它定义了浏览器窗口的大小和缩放行为。通过设置width、height、initial-scale、minimum-scale、maximum-scale和user-scalable等属性，可以精确调整网页在不同设备上的显示效果，确保页面在移动端的适配性和用户体验。

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

什么是Viewport

在meta标签中使用，用于定义窗口的各种行为。例如网页的缩放和平移、宽高等

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
    viewport-fit=cover,user-scalable=no" />

width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义放大最大比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义缩小最小比例，它必须大于或等于minimum-scale设置
user-scalable	yes / no	定义是否允许用户手动缩放页面，默认值 yes

rem

rem为长度单位，是一种相对值，H5项目为了适配多种屏幕通常使用rem来达到效果。

一般H5项目以375px宽度为标准值，那么为了方便我们可以把屏幕分为375份，每一份是1px；

当屏幕宽度为375px时，1rem = 1px

当屏幕宽度为700px时，1rem = 2px

......

所以不论屏幕的宽度如何，只要固定总宽度为375rem，就能达到各种窗口的适配。

项目中

根据窗口的变化设置根节点的fontSize为1rem的长度，在其他样式中使用rem代替px

(function (doc, win) {
  let docEl = doc.documentElement
  let recalc = function () {
    let clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = (clientWidth / 375) + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener('resize', recalc, false)
})(document, window)