移动端响应式布局-526互联

实现响应式布局开发的步骤

寻找参照的比例（例如设计稿的比例），在这个比例下给网页的字体设置一个初始值，便于计算可以设置为100px，不可以设置为12px以下的，因为浏览器最小字体为12px，如果设置为10px则会按照12px进行计算。未来我们要把设计稿中测量出来的尺寸（px）转换为REM单位去设置样式

    html {
      font-size: 100px;
    }

根据当前设备的宽度，计算相对于设计稿来讲缩放的比例，让REM的比例也跟着播放，这里需要使用js的立即执行函数。获取设备宽度和设计稿的宽度，计算过后为window监听resize事件

    (function () {
      const computed = () => {
        let html = document.documentElement,
            deviceW = html.clientWidth,
            designW = 750;
        let ratio = deviceW * 100 / designW;
      };
      coumputed();
      window.addEventListener('resize',computed);
    })();

给页面设置最大宽度，例如750px，目的是不想让REM继续变大，变大会影响美观；让页面宽度继续加大时，我们可以让内容居中，左右留白即可

    html,
    body {
      height: 100%;
      background-color: #f4f4f4;
    }

    #root {
      margin: 0 auto;
      //最大宽度
      max-width: 750px;
      height: 100%;
      background-color: #fff;
      font-size: 0.5rem;
    }