1️⃣ 百分比适配

根据父级算百分比，需要配合其它布局使用。

1️⃣ viewport缩放

设置所有机型的 css 像素为一致的。

1️⃣ DPR缩放

把 css 像素缩放成与设备像素一样大的尺寸。

1️⃣ rem 适配

把所有设备等分成若干份，再计算元素的宽度所占的份额。
rem 适配

  1.   1. em 和 rem    
  2.      1. em 和 rem 都是 CSS 中的长度单位。而且两个都是相对长度单位，不过两个有点区别
  3.      2. em 相对的是父级元素的字体大小
  4.      3. rem 相对的是根元素的字体大小  - 淘宝团队使用根元素 font-size 为 100px

2️⃣ 来自手淘 H5 的移动端适配

链接：https://github.com/amfe/lib-flexible

  1. function flexible (window, document) {
  2.   var docEl = document.documentElement // 获取html的根元素
  3.   var dpr = window.devicePixelRatio || 1 // 物理像素比(屏幕)，如果没有就 当成1来用
  4.   // 创建一个设置body的fontsize的函数
  5.   function setBodyFontSize () { 
  6.     if (document.body) {//如果页面中有body，
  7.       document.body.style.fontSize = (12 * dpr) + 'px' // 将body的fontsize设置为12乘物理像素比
  8.     }
  9.     else {
  10.       document.addEventListener('DOMContentLoaded', setBodyFontSize) // 等页面的元素加载完之后再调用一下这个函数。因为浏览器执行代码是从上到下，当解析到script标签的时候，可能body还没构建好。所以需要考虑全面。
  11.     }
  12.   }
  13.   setBodyFontSize(); // 调用一下设置body的fontsize的函数
  14.   // 设置html元素的文字大小，因为rem 是相对于根节点而定的
  15.   function setRemUnit () {
  16.     var rem = docEl.clientWidth / 10 // 将整个屏幕划分为10等分
  17.     docEl.style.fontSize = rem + 'px' // 将html元素的fontsize设置为10分之1像素
  18.   }
  19.   setRemUnit() //调用设置html的fontsize的函数
  20.   window.addEventListener('resize', setRemUnit) // resize事件是 当页面尺寸大小发生变化的时候,要重新设置rem的大小
  21.   window.addEventListener('pageshow', function (e) { // pageshow事件是 重新加载页面触发的事件
  22.     if (e.persisted) { // 如果是从缓存取过来的页面也重新设置一下rem的大小(主要是火狐浏览器有往返缓存机制，这个缓存保存了DOM和JS的状态)
  23.       setRemUnit()
  24.     }
  25.   })
  26.   // 有些移动端的浏览器不支持0.5像素的写法
  27.   if (dpr >= 2) { //如果物理像素比>=2
  28.     var fakeBody = document.createElement('body') // 创建一个body节点
  29.     var testElement = document.createElement('div') // 创建一个div节点
  30.     testElement.style.border = '.5px solid transparent' // 将创建的div的border设置为0.5px
  31.     fakeBody.appendChild(testElement) // 将创建div添加到创建的body中
  32.     docEl.appendChild(fakeBody) // 将创建的body添加到html根节点中
  33.     if (testElement.offsetHeight === 1) { // 如果div的高度等于1(包括了边框)
  34.       docEl.classList.add('hairlines') // 就添加一个类名hairlines
  35.     }
  36.     docEl.removeChild(fakeBody) // 将创建的body从html根节点中移出掉
  37.   }
  38. }(window, document))

1️⃣ hotcss

链接：https://github.com/imochen/hotcss

1️⃣ vw、vh适配

根据 CSS3 规范，视口单位主要包括以下4个：

  1.   1. vw：1vw 等于视口高度的1%。
  2.   2. vh：1vh 等于视口高度的1%。
  3.   3. vmin：选取 vw 和 vh 中最小的那个。
  4.   4. vmax：选取 vw 和 vh 中最大的那个。

vw 和 vh 兼容性问题 ( 在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持 )

2️⃣ vw & vh 的适配方案

  1.   1. 第一：通篇使用 vw
  2.   2. 第二：使用 vw 设置根字体大小，布局使用 rem

image.png