rem的理解

获取到html元素
去监听手机的屏幕进行翻转
计算html的字体大小
监听窗口缩放
监听文档加载结束

解析

假设UI给了一套设计图宽度为y(px),再假设手机的屏幕宽度为x(px),hmtl的字体大小为p(px),如果页面上有元素demo(px),那这个元素应该占据手机屏幕的多少(px)呢? 设置多少rem值()呢？ 1.首先咱要获取到html，再之后通过let resizeEvent="orientationchange" in window ? orientationchange : "resize" 来获取到手机屏幕是否翻转吗,毕竟rem是目前常用的自适应布局,肯定要来判断用户的手机屏幕是否翻转，来动态的去修改页面里面的内容.

2.咱要来计算页面的字体大小了！也就是 p/y=rate 再去用rete* p =htmlfontsize 这样就可以拿出 rem的值
3. 毕竟手机屏幕会有缩放，是不是作为前端攻城狮要去为用户去考虑一下用户体验呢？咱是不是要对页面进行监听,监听的时候是不是要同时去执行咱第二步的操作，去监听页面window.addEventListener(resizeEvent,第二步骤,false)

4.同理咱页面加载结束是不是也要去监听一下用户的手机屏幕呢不也是同理吗？ document.addEventListener("DOMContentLoaded", recalculate, false)

这样咱们把这个修改的rem单位的js 封装一下,就能直接用了~

  let html = doc.documentElement;
  let resizeEvent = "orientationchange" in win ? "orientationchange" : "resize";
  function recalculate() {
    let clientWidth = html.clientWidth;
    if (!clientWidth) {
      return;
    }
    let rate = clientWidth / uiSize;
    html.style.fontSize = rate * prem + "px";
  }
  win.addEventListener(resizeEvent, recalculate, false);
  doc.addEventListener("DOMContentLoaded", recalculate, false);
})(document, window, 750, 100);

这边我用了自调用函数,那咱这边这个函数就能自动执行了,方便了我们开发~ 但是要实现自适应布局还少了一个mete标签下次再说！

对于rem布局的理解

rem的理解

解析