使用rem开发响应式布局

步骤一

• 从Ui设计师拿到设计稿，一般尺寸都是以iphone 6的尺寸为准 750*1334（6381136）

• 在样式中给html设定一个fontsize的值，我们一般设置一个方便后续计算的值，例如10px、100px等，我们使用100px

• 写样式

  • 完全按照设计稿的尺寸来写样式，设计稿上的长度、height、margin、padding、字体的值是多少，我们就写多少，这样可以100%还原设计稿

  • 注意：需要把得到的像素值/100px,转换为rem单位

步骤二

• 根据当前屏幕的宽度和设计稿的宽度来重新计算html的FontSize的大小

• 根据当前屏幕宽度和设计稿的宽度的比例，动态计算当前宽度下的fontsize值大小，如果fontsize值改变了，之前设定的所有的rem单位的值自动会跟着改变

• 引用一下js

• <script>
      function setRem() {
          var ui_w = 375;
          // 获取屏幕的宽度
          var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
         

          // 通过js动态改变html根节点字体大小
          var html_ = document.getElementsByTagName('html')[0];
          html_.style.fontSize = (clientWidth/ui_w)*100 +'px';
      }
      // window.onresize 浏览器被重置大小执行事件
      window.onresize = setRem;

  
  </script>