使用em和rem单位进行布局,相对%百分比布局更加灵活,可以根据浏览器的字体大小调整和缩放来相应显示页面。
但因为em是相对父级元素的font-size
,想想就复杂。
而rem是相对于根元素html的font-size
进行计算,绕开了复杂的层级关系,更加简单。浏览器默认字体大小为16px,转化关系为 16px=1rem。
具体应用就是给html设置fontSize大小,在DomContentLoaded或resize时,动态调整fontSize大小,让使用rem单位的元素一起缩放,达到自适应的效果。
document.documentElement.style.fontSize=?;
?处的值为一个比例关系,根据当前可视区的大小与设计稿做一个比例关系。通过这个比例进行缩放。