移动端适配方案

说到适配移动端，首先想到的是媒体查询，但得写多个@media查询块，我们可以通过动态设置根元素的font-size，再配合使用rem来做到适配。

🌰
假如我们需要显示2列n行的电影卡片，设计稿给到每个卡片的尺寸：iphone 6下，width 300px，如何保证在其他不同分辨率的机型上等比显示。

假如在屏幕分辨率在828 X 1472 iphone 7 Plus上等比例显示，
则卡片宽：w = 300 / 750 * 828px = 331.2px

由此可见，在不同机型上，卡片的宽度不是一个固定的px。为确保在不同的机型上能按等比显示，卡片宽度采用rem为单位。rem是以html根元素为参考的，我们只需动态设置html根元素的font-size即可。

动态设置html根元素的font-size大致思路⬇️

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
    (function(window, document){
      'use strict';
      (function() {
        var viewportEl = document.querySelector('meta[name="viewport"]'),
          dpr = window.devicePixelRatio || 1,
          maxWidth = 540;
        if(dpr > 2) {
          dpr = 2;
        }
        document.documentElement.setAttribute('data-dpr', dpr);
        document.documentElement.setAttribute('max-width', maxWidth);
        var scale = 1 / dpr,
          content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no, viewport-fit=cover',
          viewportEl.setAttribute('content', content);
      })();
      
      var clientWidth =  document.documentElement.clientWidth;
      if( hotcss.maxWidth && (clientWidth/dpr > maxWidth) ){
         clientWidth = maxWidth*dpr;
      }
      var htmlSize = clientWidth/7.5;  
      htmlSize = htmlSize < 50 ? 50 : htmlSize;
      document.documentElement.style.fontSize = htmlSize + 'px'; // 此时，1rem =htmlSize px
    })( window , document );
  </script>

给viewport设width=device-width，让viewport的宽度等于物理设备上的真实分辨率，这样就可以通过document.documentElement.clientWidth准确的获取到手机的尺寸；initial-scale：初始化时的缩放比例，同时还可以设置最大最小缩放比例；user-scalable=no不允许用户缩放。

deviceWidth / 7.5，视口宽度被等分为7.5份，每一份就是1rem（浏览器默认根元素html的font-size为16px，1rem = 16px，重新设置根元素的fontSize后，1rem就等于htmlSize px。），从而1rem在不同的视觉容器中表示不同的大小，但在视口总宽度中的占比是不变的，实现了等比适配。

1rem等于给html根元素设定的font-size的px值。

7.5只是为了计算方便，可为其他值。

最后编辑于：2020.02.25 11:33:46