只需几行CSS 实现移动端适配

晒网打渔的一天，翻出几年前写的微信H5，一些分享到朋友圈的宣传动画类的小项目，项目不大，当时不晓得哪里拷了几行css代码实现了移动端适配。今天翻出来研究了一番

步骤：

1. 第一步 index.html 中引入下列代码，这是移动端开发很重要的一步

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

2. 第二步 css 基于设计稿宽度750px 引入固定代码

   html{
     font-size: 13.3333vw;
   }
   /* 媒体查询稍微兼顾了一下电脑状态下的预览 */
   @media screen and (min-width: 750px) {
     html{
       font-size: 100px;
     }
   }
    /* 使用 */
   div{
     width: 1rem; /* 1rem = 100px, 依此换算 */
   }

思路过程：

1. mobile.width = 750px  => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;

2. 即：html:{font-size: 13.33vw} // 就是以100px位基准 >>> 1rem = 100px;

3. 移动端的尺寸 / 100  =  XXX rem；

利用计算属性优化：

以1rem = 100px换算

750px设计稿： 100vw / 7.5
650px设计稿： 100vw / 6.5

html{
    font-size: calc(100vw / 7.5);
}

JS实现同样效果：

(function (window, document) {
    let getRem = function () {
       if (document) {
          let html = document.documentElement
          let width = html.getBoundingClientRect().width  > 750 ? 750 : html.getBoundingClientRect().width
          let hWidth = width * (750 / 352);
          html.style.fontSize = Math.ceil(hWidth / 16) + "px";
       }
    };
    getRem();
    window.onresize = function () {
       getRem();
    }
})(window, document)