1、什么是rem
rem是相对于根元素(html标签)的字体大小的单位。
2、rem实现适配的原理
核心思想:百分比布局可实现响应式布局,而rem相当于百分比布局。
实现手段:动态获取当前视口宽度width,除以一个固定的数n,得到rem的值。表达式为rem = width / n。
通过此方法,rem大小始终为width的n等分。
3、动态计算rem
let init = () => {
let width = document.documentElement.clientWidth;
document.documentElement.style.fontsize = width / 10 + 'px';
console.log(width);
}
//首次加载是计算
init();
//添加监听,窗口发生变化时计算
window.addEventListener('resize',init);
window.addEventListener('orientationchange',init);
本文深入解析了REM单位的概念及其在响应式网页设计中的应用原理。通过将REM单位与根元素字体大小动态关联,实现了页面元素尺寸随屏幕宽度变化而自适应调整的效果。文章还提供了具体的JavaScript代码示例,展示了如何根据当前视口宽度动态计算REM值。
1150

被折叠的 条评论
为什么被折叠?



