<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
// 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 来完成