响应式布局html字体设置和REM换算

//  html字体随页面大小改变
function computedREM() {
  let HTML = document.documentElement,
      winW = HTML.clientWidth;
  HTML.style.fontSize = winW / 750 * 100 + 'px' // 750设计稿宽度, 100字体大小
}
computedREM()
window.addEventListener('resize', computedREM)
           

总结

REN响应式布局开发思路

第一步： 拿到设计稿后（一般750px）, 我们设定一个初始的 REM 和 PX 的换算比例（一般设置 1REM = 100PX, 方便后期换算）

第二个：测量出设计稿的元素尺寸，在编写样式的时候 其全部转换为 REM 的单位（除于100） => 100% 还原设计稿

第三步：编写一段js，获取当前设备的宽度， 让其除于设计稿的宽度750，再乘以初始换算比例100，计算出当前设备下 1REM 等于多少像素

第四步：项目中主体布局还是以 REM 为主，部分效果可以基于 flex 布局来完成 需要样式微调基于 @meida 来完成