WebKit的CSS Aspect Ratio Box：重塑响应式设计

/* 使用CSS的WebKit特有属性实现响应式设计 */
.aspect-ratio-box {
    position: relative;
    width: 100%; /* 指定容器宽度占满父元素 */
    height: 0; /* 高度为0，宽度为auto时，高度将通过宽度计算得出 */
    padding-bottom: 56.25%; /* 定义容器的padding-bottom为宽度的56.25%，这样高度就是宽度的100% */
    background-color: #f1f1f1; /* 设置背景颜色 */
}
 
.aspect-ratio-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 设置iframe的宽度占满容器 */
    height: 100%; /* 设置iframe的高度占满容器 */
    border: none; /* 去除边框 */
}

这段代码定义了一个.aspect-ratio-box类，它通过设置padding-bottom为容器宽度的56.25%，创建了一个宽高比为16:9的盒子。在这个盒子内部，任何iframe元素都将自动保持这个宽高比。这是一个典型的使用padding-bottom技巧来创建宽高比盒子的例子，适用于需要保持视频或图片宽高比的响应式设计场景。