如何通过px、em、rem三种单位实现网页全屏自适应？

妥妥的！ 你是否曾遇到过适配不同屏幕尺寸的困扰？传统的像素单位虽然直观，但在响应式设计中却存在诸多问题。因为前端技术的不断发展， CSS中涌现出了一系列新的单位和技术，帮助我们构建更灵活、更网页的全屏自适应。

什么是视口单位？

在移动端开发中，视口是浏览器窗口的大小。为了让网页能够适应不同的设备屏幕尺寸和分辨率，我们需要使用视口单位。与像素不同，视口单位不受显示器分辨率的影响。这使得我们无需再为各种不同的电脑分辨率进行单独的调整，就这样吧...。

对吧，你看。 比方说`vw` 是相对于视口宽度的百分比，`vh` 是相对于视口高度的百分比。它们可以轻松地实现页面中垂直居中的效果。

为什么选择em和rem？

传统的像素单位虽然精确，但在响应式设计中却存在一些问题：，改进一下。

• 可访问性问题： 许多用户会调整浏览器的默认字体大小。使用px定义的字体不会随之缩放，导致内容难以阅读。
• 响应式挑战： 面对日益多样化的设备屏幕尺寸和分辨率，仅仅依靠媒体查询来调整布局变得越来越复杂和低效。
• 维护成本高昂： 每次新增一个屏幕尺寸或者修改设计稿时都需要重新评估并更新媒体查询规则，增加了开发和维护成本。

相对单位如em和rem解决了这些问题。

em

`em` 单位是相对于当前元素的字体大小而言的。这意味着当 推倒重来。 当前元素的大小发生变化时其子元素的大小也会相应地发生变化。

.title { font-size: 2em; /* 默认字体大小是16px */ } .subtitle { font-size: 1.5em; /* 相当于24px */ }

rem

`rem` 单位是相对于根元素字体大小而言的。根元素的字体大小通常由浏览器默认设置决定。所以呢，`1rem` 等于 `16px`，我开心到飞起。。

html { font-size: 16px; /* 基准 */ } .heading { font-size: 1.2rem; /* 相当于19.2px */ } .paragraph { font-size: 0.8rem; /* 相当于12.8px */ }

像素：何时使用？

`px` 单位仍然在某些情况下有其用武之地：

• 精确控制： 当需要精确控制元素的大小时可以使用 `px` 单位。
• 固定尺寸： 在设计稿中定义固定尺寸的元素时可以使用 `px` 单位。

vw 和 vh 的应用