在Web开发的广阔天地里，CSS单位的选择直接关系到页面的布局灵活性和响应式设计的效果。今天，我们深入探讨viewport单位（主要是vw/vh）、rem、百分比（%）以及像素（px）的基础知识，并通过实际代码示例来解析它们在布局中的应用，同时模拟几道面试中可能遇到的问题。
- Viewport单位（vw/vh）
Viewport单位是基于视口（浏览器可视区域）的尺寸来定义的。1vw等于视口宽度的1%，1vh等于视口高度的1%。这使得它们非常适合制作全屏布局或响应式元素大小调整。
示例代码：
css
.full-width {
width: 100vw; / 宽度占满整个视口宽度 /
height: 50vh; / 高度占视口高度的一半 /
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw; / 水平居中技巧 /
margin-right: -50vw;
}
- REM单位
rem（root em）是相对于根元素（
示例代码：
css
html {
font-size: 16px; / 基础字体大小 /
}
.box {
width: 2rem; / 宽度为32px，如果html的font-size为16px /
height: 2rem;
font-size: 1.25rem; / 字体大小为20px /
}
- 百分比（%）
百分比单位在CSS中非常灵活，可以应用于宽度、高度、边距等多种属性。其值是相对于父元素的相应属性计算的。
示例代码：
css
.parent {
width: 80%; / 宽度为父元素的80% /
padding: 10%; / 上下左右的内边距都是父元素宽度的10% /
}
.child {
height: 50%; / 高度为父元素高度的50% /
}
- 像素（px）
像素是最基本的单位，它不受任何外界条件（如视口大小、父元素尺寸）的影响，始终保持一致的大小。但在响应式设计中，过度使用px可能会导致布局在不同设备上表现不佳。
示例代码（简单）：
css
.fixed-size {
width: 200px; / 宽度固定为200像素 /
height: 100px;
}
面试题模拟
问题：如何在不使用JavaScript的情况下，实现一个元素的高度始终等于其宽度的两倍，且该元素能够响应视口大小的变化？
答案：
使用vw单位结合CSS的calc()函数可以轻松实现。
css
.responsive-box {
width: 50vw; / 宽度为视口宽度的一半 /
height: calc(100vw 0.5 2); / 高度为宽度的两倍，即视口宽度的1倍 /
}
这里，我们利用了vw单位基于视口宽度的特性，并通过calc()函数计算高度，使得元素的高度始终是其宽度的两倍，同时保持了响应式的特性。
