移动端适配的VW，VH与rem

1.VW和VH（逐渐变主流）

1.vw与VH的定义

1.vw和vh是相对长度单位，是相对视口屏幕的的宽度和高度。 Visual Viewport（视觉视口）的简写

2.100VW等于屏幕的宽度。

3.100VH等于屏幕的高度。

2.VW和VH的作用

1.实现移动端屏幕的适配，解决随着屏幕大小不断变化而元素本身大小无法改变的现象。PX像素值是绝对单位，无法使元素在不同屏幕大小下适配。

3.VW和VH在vscode的计算书写。（以VW 为例）

1.确定设计稿屏幕的尺寸，一般情况下按照Iphone6屏幕尺寸来定稿（宽375px，高667）。

2.明确设计稿中的元素（X）尺寸（一般是PX单位）假设元素宽为30px。

3.适配的手机宽度未知，但是可以用100vw来代替。

4.设计稿中元素（X）在适配手机中的宽度用Y更替替。

5.由上可以得到公式：

Y /100VW=X/375px

Y=（100*X）/375

Y=（100*30）/375=8VW

6.注意的是在cscode想要计算，需要书写calc（运算数值）并且运算符间要有空格，书写如下

7.示意图（设计稿375px）

8.（当尺寸改变时div宽度大小）

2.rem

1.定义

rem（font size of the root element）是指相对于根元素（html）的字体大小的单位，也称为相对长度单位。
当根元素设置了字体大小单位为100px时，那么1rem=100px。（谷歌默认字体大小为16px，不同浏览器不同）

2.如何使用rem

1.首先在body标签末端用script标签导入阿里手机淘宝团队的flexible.js代码（在当前文件夹新建一个JS样式表）。

2.在样式表中导入关键代码。如下

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

3.引入js后，10rem=屏幕宽度，计算方法和VW一样，书写如下

移动端屏幕适配的VW，VH和rem。