- 为什么做 rem 适配
a) 机型太多,不同的机型屏幕大小不一样
b) 需求: 一套设计稿的内容在不同的机型上呈现的效果一致,根据屏幕大小不同的变化,页面中的内容也相应变化 - rem和em区别
rem: (root em),rem是css中的一种相对长度单位。
相对于根元素(即 html元素)font-size计算值的倍数
em是相对于父标签元素 - 实现1:
function remRefresh() {
let clientWidth = document.documentElement.clientWidth;
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '12px';
}
window.addEventListener('pageshow', () => {
remRefresh()
})
let timeoutId;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() =>{
remRefresh()
}, 300)
})
补充也可以在html文件中配合媒体查询设计html元素
@media screen and (min-width: 320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}
- 实现2:
第三方库实现lib-flexible + px2rem-loader等其他库