CSS 中px、em、rem、%、vw、vh单位之间的区别详解

1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px 3、rem rem是CSS3新增的一 在CSS布局中，选择合适的单位对于页面的响应式设计至关重要。本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是固定的，它不受用户缩放或设备分辨率的影响，因此适用于需要精确控制元素尺寸的情况。 2. **em**: em是一个相对长度单位，它的大小取决于其父元素的字体大小。例如，如果父元素的字体大小为16px，1em等于16px。当需要根据父元素的大小进行动态调整时，em单位非常有用。然而，这种继承特性可能导致嵌套元素的尺寸逐层放大，如果不加以控制，可能会导致意想不到的结果。 3. **rem**: CSS3引入的rem单位，其含义是"root em"，即相对于HTML根元素的字体大小。这允许开发者通过改变根元素的字体大小来统一调整整个页面的字体尺寸，而不会产生em单位那样的连锁反应。对于实现全局的响应式设计，rem是一个理想的单位。 4. **%**: 百分比单位也是相对长度单位，但它相对于父元素的某个属性值（如宽度或高度）。例如，一个元素的宽度设置为父元素宽度的50%。%单位在创建流式布局或响应式设计时特别有用，因为它可以根据容器的尺寸变化而变化。 5. **vw 和 vh**: 视窗单位vw（viewport width）和vh（viewport height）是相对于浏览器视口宽度和高度的百分比。1vw等于视口宽度的1%，1vh等于视口高度的1%。这两个单位常用于创建与视口大小相关的元素，比如全屏背景图像或等宽/高等的元素。vmin和vmax分别代表vw和vh中的最小值和最大值，它们提供了一种更灵活的方式来适应不同的屏幕尺寸。 在实际应用中，应根据设计需求选择合适的单位。例如，对于固定尺寸的元素，px可能是最佳选择；对于需要随父元素调整的文本，em是合适的；对于全局响应式布局，rem是理想单位；而对于与视口尺寸相关的元素，vw和vh则不可或缺。同时，为了实现更好的响应式设计，可以结合使用calc()函数和视窗单位，如calc(100vh - 2 * header_height)，来动态计算元素的大小。 理解并熟练运用这些CSS单位，可以帮助开发者创建更具灵活性和适应性的网页设计，从而提高用户体验。在实践中，应根据项目需求灵活选择，以达到最佳的视觉效果和交互体验。