移动端适配思路

<!-移动端适配第一种-->  
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <script>
    (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) {//这个event的属性是判断是否为缓存页面 https://www.cnblogs.com/leolovexx/p/7026022.html 这个博主详解了，留给传送们
          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')//这里又是一个知识点了https://blog.csdn.net/dududu01/article/details/47256449 链接传送
        }
        docEl.removeChild(fakeBody)
      }
    }(window, document))
  </script>

上面是用于移动端适配的js代码适合与ipad与各个后记端页面

使用思路:

在html的头部先引用进行更改font-size适配

然后在css中可以直接用px，用插件代码会自动把px换算为rem，这个适配方案考虑到了一些奇怪的物理像素与css像素的区别，不好的是如果有用轮播图之类要控制距离的，会不好计算px的距离，动态改变的px值是不会再转化为rem值的，需要人工再转一次。

 自动转换

第一步：因为rem是根据更元素来计算大小，所以，捕捉到当前屏幕的大小并赋值给html，这是其一

第二步：使用px2rem插件，来捕捉当前项目的所有px，直接计算相对应数值。

这样，以后写界面，就可以直接用px来构建界面，不用自己去计算啦！ 参考网站传送门 https://www.jb51.net/article/135276.htm

第二张适配(function (doc, win) {

        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
//640是设计稿的大小

                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

　　在html种引入rem.js，位置没有过多要求，不过建议放在css上面，然后css颜色的大小用rem写，包括font-size