CSS 比率值

CSS 中的比率值是指两个值之间的比率关系。这种关系通常用于设计响应式布局，可自适应不同屏幕尺寸。

语法和用法

CSS 比率值通常在 padding 或 margin 属性中使用。它们是一个由两个值组成的简单 CSS 单位，分别表示宽度和高度的比率。

以下是 CSS 比率值的语法：

<ratio-value> = <width-ratio> / <height-ratio>

其中，<width-ratio> 和 <height-ratio> 表示对应的宽度和高度的比率。

在 CSS 中，我们可以使用 calc 函数计算比率值。例如，下面的代码将元素的顶部和底部边距设置为相等，并使元素的高度为其宽度的一半：

.element {
  height: calc(100vw / 2);
  margin-top: calc(100vw / 4);
  margin-bottom: calc(100vw / 4);
}

实例

以下代码演示如何使用 CSS 比率值创建一个具有可变比率宽度和固定高度的响应式元素：

<div class="wrapper">
  <div class="box"></div>
</div>

.wrapper {
  position: relative;
  padding-bottom: 75%; /* 4:3 比率 */
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f00; /* 红色背景 */
}

以上代码中，我们使用了父元素的 padding-bottom 属性创建了一个高度为 0、宽高比为 4:3 的占位符。该属性的值是按百分比设置的，用于指定元素的高度是其宽度的多少倍。

接下来，我们使用了子元素的 position: absolute 值，将其放置在父元素内，并用 width: 100% 和 height: 100% 填充其整个区域。此时，子元素的宽度是由父元素的宽度决定的，因此在不同的屏幕尺寸下，这两个元素将保持其 4:3 的宽度与高度比例。同时，子元素的背景颜色也将填充整个区域。

结语

CSS 比率值在设计响应式布局时是非常有用的工具。通过使用比率值，我们可以按比例调整元素的大小和位置，同时确保它们在不同的屏幕尺寸下仍然具有类似的外观和感觉。