什么是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)

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