2017.12.5-学习笔记：简易rem布局的js代码
2017-12-05 本文已影响65人
bixin
rem
rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。
- 利用rem这个单位去控制所有的盒子的大小，然后动态去改变html的font-size的值
- rem的公式：设计图的大小/自己基于这个设计图设定font-size值(推荐40) = 这个屏幕的大小/这个屏幕对应的font-size值
- 反求rem： 在设计图下面得到的元素宽高 / 基于这个设计图设定的 font-size值
- 建议： 使用rem宜小不宜大，尽量使用固定+自适应，少用盒子与盒子之间浮动
// 千万注意：不要添加入口函数
// 同时引用的时候要放在最前面
// 获取 HTML 元素
let html = document.documentElement;
// 获取屏幕的宽度
let screenWidth = html.clientWidth;
let timer = null;
// 初始的设计图的大小
let uiWidth = 640;
// 初始的font-size的大小
let fonts = 40;
// 获取初始的比例
let rate = uiWidth / fonts;
// 根据当前的屏幕大小动态去计算这个屏幕所对应font-size值
html.style.fontSize = screenWidth / rate + 'px';
let getSize = () => {
clearTimeout(timer);
timer = setTimeout(() => {
//重新获取屏幕的宽度
screenWidth = html.clientWidth;
//针对屏幕宽度做限定
if (screenWidth <= 320) {
html.style.fontSize = 320 / rate + 'px';
} else if (screenWidth >= uiWidth) {
html.style.fontSize = uiWidth / rate + 'px';
} else {
// 根据当前屏幕大小动态去计算这个屏幕锁对应font-size的值
html.style.fontSize = screenWidth / rate + 'px';
}
}, 100);
}
getSize();
window.addEventListener("resize", getSize);
