CSS相对单位：并非都直接等同于像素
在CSS中，em、rem、vh、vw等相对单位的运用十分普遍，但许多人误以为它们最终都会被浏览器转换成像素(px)进行渲染。这种说法并不完全准确。虽然浏览器最终渲染时需要将这些单位转换为像素，但这并不意味着它们一开始就与像素直接关联，或其数值始终与像素成比例。 它们是基于不同参考值的相对单位。
em、rem、vh、vw的实际换算:
这些单位的计算并非直接与像素挂钩。
vw (viewport width): 基于视口宽度，1vw 等于视口宽度的 1%。例如，在800px宽的窗口中，1vw等于8px，但这只是特定情况下的结果。当窗口大小改变时，1vw的像素值也会随之变化，而px值保持不变。
vh (viewport height): 基于视口高度，与vw类似，其像素值会根据视口高度变化而变化。
em: 基于父元素的字体大小。如果父元素字体大小为16px，1em就等于16px。但如果父元素字体大小改变，1em的值也会随之改变。
rem (root em): 基于根元素(html)的字体大小。这使得rem在响应式设计中更易于管理，因为它的值只受根元素字体大小的影响。
因此，说这些单位最终等于多少像素，只在特定视口尺寸和字体大小下才成立。 理解这些单位的相对性，才能更有效地进行响应式网页设计。
