CSS响应式布局实现1920屏幕1rem等于100px
代码解析与实现
设置根元素的 font-size 为 5.208333vw
假设你想让根元素的 font-size 基于视口宽度来动态调整。我们可以通过设置 font-size 为 5.208333vw 来让 1rem 相当于视口宽度的 5.208333%。
- 计算
5.208333vw: 当屏幕宽度为 1920px 时，5.208333vw等于5.208333%的 1920px，即5.208333 * 1920px ≈ 100px。
设置 body 元素的 font-size 为 0.16rem
通过将 body 的字体大小设置为 0.16rem，此时 body 的实际字体大小是根元素字体大小的 0.16 倍。假设根字体大小是 100px，则 body 的字体大小为 0.16 * 100px = 16px。
完整的代码实现
// 设置根元素的字体大小（根据视口宽度调整）
document.body.parentNode.style.cssText = `font-size: ${5.208333}vw`;
// 设置 body 元素的字体大小为 0.16rem，相当于根元素字体大小的 0.16 倍
document.body.style.cssText = 'font-size: 0.16rem';
解释
-
根元素的字体大小：
document.body.parentNode.style.cssText = `font-size: ${5.208333}vw`;- 这行代码将根元素（
<html>）的font-size设置为5.208333vw。 5.208333vw是相当于视口宽度的 5.208333%。因此，屏幕宽度为 1920px 时，5.208333vw等于100px。
- 这行代码将根元素（
-
body元素的字体大小：document.body.style.cssText = 'font-size: 0.16rem';- 这行代码将
body元素的字体大小设置为0.16rem。假设根元素的字体大小是100px，那么body元素的字体大小为0.16 * 100px = 16px。
- 这行代码将
示例效果
-
当屏幕宽度为
1920px时：- 根元素的
font-size为100px（5.208333vw）。 body元素的font-size为16px（0.16rem）。
- 根元素的
-
当屏幕宽度缩小到例如
960px时：- 根元素的
font-size将变为5.208333vw（960 * 5.208333 / 100 = 53.333px）。 body元素的font-size为0.16rem，即53.333px * 0.16 = 8.533px。
- 根元素的
小结
- 通过设置
font-size: 5.208333vw来让根元素的字体大小根据视口宽度动态变化。 - 使用
0.16rem设置body的字体大小，意味着body的字体大小将始终是根元素字体大小的 0.16 倍。 - 这种方法适用于响应式布局，确保在不同屏幕宽度下能够动态调整页面元素的字体大小。