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

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

什么是视口单位？

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

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

为什么选择em和rem？

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

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

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

em

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