网页适配，rem 的方法

rem 的适配的 js 代码如下

// 将设计稿的宽度750px作为基准宽度，1rem = 100px。
import Tools from './tool'
function setRem() {
// 这个是设计图尺寸宽度
  // let designWidth = Tools.checkMobile() ? 750 : 1920
// 这个是设计图是尺寸高度
  let designHeight = Tools.checkMobile() ? 1334 : 1080
  let scale = document.documentElement.clientHeight / designHeight
  let fontSize = 100 * scale
  // 设置根元素字体大小
  document.documentElement.style.fontSize = `${fontSize}px`
}
// 页面加载完成后设置根元素字体大小
window.onload = function() {
  setRem()
}
// 窗口大小变化时重新设置根元素字体大小
window.onresize = function() {
  setRem()
}

上述代码中用高度来做适配是因为我们的要求是一个全屏滚动的网页，根据高度来做的适配。

在这里我们的基础尺寸是 100px， 倘若设计图上的尺寸是 20px 的话，那再用 rem 为单位的时候，应该谢 0.2rem

还有一个重要得 一点，一定要在 html 的入口文件，写上以下：

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

以上方法，还有一个判断是否是手机端的，有时候我们手机端和 pc 段的设计图完全不一样的时候，就需要根据根据不同的设计图尺寸，做出不一样的适配。