两种移动适配方案——rem、vm/vh

移动适配指的是在屏幕宽度不同时，网页元素尺寸不同（等比缩放）

1. rem

rem单位是相对单位，是相对于HTML标签的字号计算结果

1rem = 1HTML字号大小

例如在HTML字号大小为20px时，box盒子的宽度为5*20=100px，高度为3*20=60px

/* 1rem = 1html标签字号大小 */
 html {
     font-size: 20px;
 }
 
 .box {
     width: 5rem;
     height: 3rem;
     background-color: pink;
 }

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式。当某个条件成立, 执行对应的CSS样式

用途：手机屏幕大小不同，分辨率不同，设置不同的HTML标签字号

一般来说，目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。也就是对于320px宽的屏幕，rem应该为32px

/* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
 @media (width:320px) {
     html {
         font-size: 32px;
     }
 }

 @media (width:375px) {
     html {
         font-size: 37.5px;
     }
 }
 @media (width:414px) {
     html {
         font-size: 41.4px;
     }
 }

媒体特性常用写法：max-width和min-width

/* 视口宽度小于等于768px， 网页背景色是粉色 */
  @media (max-width: 768px) {
      body {
          background-color: pink;
      }
  }

  /* 视口宽度大于等于1200px， 网页背景色是skyblue */
  @media (min-width: 1200px) {
      body {
          background-color: skyblue;
      }
  }

注意：css属性都有层叠性，所以书写要按照如下顺序

• min-width：从小到大
• max-width：从大到小

举例：

@media (min-width: 768px) {
     body {
         background-color: pink;
     }
 }
 @media (min-width: 992px) {
     body {
         background-color: green;
     }
 }
 @media (min-width: 1200px) {
     body {
         background-color: skyblue;
     }
 }

完整的写法如下

• 媒体类型
  
• 媒体特性
  
• 示例:body的文字只会在视口至少为400像素宽，且设备横放时变为蓝色。

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

在外联中引入css样式

例如：

<!-- 视口宽度 >= 992px，网页背景色为粉色 -->
<!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">

flexible.js

flexible.js是手淘开发出的一个用来适配移动端的js框架， 其核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。 从而为了避免为每个屏幕宽度写一个媒体查询

(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))

在html中引入

<script src="../js/flexible.js"></script>

适配

书写代码时，所有的尺寸都是rem单位，而不是具体的像素值。

• 查看设计稿宽度，确定参考设备宽度(视口宽度) ，例如375px。
• 确定基准根字号（1/10视口宽度）37.5
• rem单位的尺寸 = px单位数值 / 基准根字号，例如 N = 68 / 37.5

2. vm/vh

使用vw/vh单位设置网页元素的尺寸，其也是相对单位

• vw是viewport width，1vw = 1/100视口宽度
• vh是viewport height，1vh = 1/100视口高度
  

开发中，一般不会在一个盒子中混用vw和vh。因为 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

与rem适配对比，其优点是简单、不需要引入flexible.js