前端面试题：px, em, rem, vw, vh 的区别解析

MD文件

下载需积分: 0 | 1KB | 更新于2024-08-03 | 156 浏览量 | 5 评论 | 举报收藏

立即下载

在前端开发中，理解和掌握各种长度单位是至关重要的，尤其是对于网页布局和响应式设计。在面试中，面试官常常会考察候选人对px、em、rem、vw和vh等单位的理解与应用。以下是对这些单位的详细解释： ### 1. px (像素) **像素**是屏幕上的最小可寻址单元，通常用于精确控制元素大小。px 是一个绝对单位，意味着元素的大小不会随浏览器窗口或用户字体设置的变化而改变。例如，设置一个元素宽度为100px，它在任何情况下都将保持100像素宽。 ### 2. % (百分比) **百分比**是相对于父元素尺寸的相对单位。当一个元素的尺寸设置为百分比时，它的大小将取决于其父元素的尺寸。例如，一个宽度设为50%的元素，会占据其父元素宽度的一半。在CSS中，可以利用百分比实现居中对齐，如下所示： ```css .container{ width: 200px; height: 200px; position: relative; } .box{ width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; } ``` 在这个例子中，`.box`会相对于`.container`的中心进行定位。 ### 3. em **em**单位是相对于当前元素的字体大小的单位。这意味着一个元素的尺寸可以是其内文本字体大小的倍数。例如，`text-indent: 2em`表示文本缩进为其字体大小的两倍。然而，使用em单位可能导致嵌套元素的尺寸连锁反应，使得计算变得复杂。 ### 4. rem **rem**（root em）单位与em类似，但它相对于根元素（通常是`<html>`元素）的字体大小而不是当前元素。这样，可以更方便地在整个文档中统一调整元素尺寸，特别是在实现响应式设计时。例如，通过媒体查询根据设备宽度动态设置根元素的字体大小，可以实现不同屏幕尺寸下的适配： ```css @media only screen and (max-width: 374px) { html { font-size: 86px; } } @media only screen and (min-width: 375px) and (max-width: 413px) { html { font-size: 100px; } } @media only screen and (min-width: 414px) { html { font-size: 110px; } } ``` ### 5. vw 和 vh **vw**（viewport width）和**vh**（viewport height）是基于视口尺寸的单位。1vw等于视口宽度的1%，1vh等于视口高度的1%。因此，`width: 50vw`会使元素的宽度等于视口宽度的一半。同样，`height: 50vh`则使元素的高度等于视口高度的一半。`vmin`和`vmax`分别代表视口宽度和高度中的较小值和较大值。在实际开发中，了解并灵活运用这些单位可以帮助创建更具响应性和适应性的页面。面试时，候选人应该能够清楚地解释这些单位的区别，并提供示例来展示它们在不同场景下的应用。