在现代的响应式设计中，网页的宽度和高度都会随着设备的不同而发生变化。这给前端开发者带来了一个新的挑战：如何在不同大小的屏幕上展示合适的宽高比例的页面元素？
本文将介绍几种常见的技巧，让你可以轻松地解决这个问题。
1. 使用 CSS 的 aspect-ratio 属性
CSS 的 aspect-ratio 属性可以让你指定一个元素的宽高比例。例如，下面的代码将创建一个宽高比为 16:9 的容器：
.container {
aspect-ratio: 16/9;
}这个属性可以与其他 CSS 属性一起使用，例如 width、height、padding 等等。当容器的大小发生变化时，元素的宽高比例也会自动调整。
2. 使用 padding-top 属性
另一个常见的技巧是使用 padding-top 属性。这个属性可以让你为一个元素的顶部添加一定的内边距，从而让元素的高度自适应父元素的宽度。
例如，下面的代码将创建一个宽高比为 16:9 的容器：
// javascriptcn.com 代码示例
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 9 / 16 * 100% */
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}这个技巧的关键是使用一个百分比的 padding-top 值，这个值应该是高度除以宽度的结果乘以 100%。例如，16:9 的宽高比例对应的 padding-top 值就是 56.25%。
3. 使用 SVG 的 viewBox 属性
如果你需要在页面中展示一个 SVG 图像，并且希望它在不同的屏幕大小下保持相同的宽高比例，可以使用 viewBox 属性。
例如，下面的代码将创建一个宽高比为 16:9 的 SVG 图像：
<svg viewBox="0 0 16 9"> <rect x="0" y="0" width="16" height="9" fill="#f00" /> </svg>
这个代码中的 viewBox 属性指定了 SVG 图像的坐标系范围。在这个例子中，坐标系的宽度是 16，高度是 9，与宽高比例相同。当 SVG 图像被缩放时，它的宽高比例也会自动调整。
4. 使用 JavaScript 动态计算宽高比例
如果你需要更加灵活地控制页面元素的宽高比例，可以使用 JavaScript 动态计算它们的大小。
例如，下面的代码将创建一个宽高比为 16:9 的容器，并且在窗口大小发生变化时动态调整它的大小：
// javascriptcn.com 代码示例
<div id="container"></div>
<script>
function resizeContainer() {
var container = document.getElementById('container');
var width = container.offsetWidth;
var height = width * 9 / 16;
container.style.height = height + 'px';
}
window.addEventListener('resize', resizeContainer);
resizeContainer();
</script>这个代码中的 resizeContainer 函数会在窗口大小发生变化时被调用。它会根据容器的宽度计算出相应的高度，并且设置容器的高度属性。当窗口大小发生变化时，容器的宽高比例也会自动调整。
总结
本文介绍了几种常见的技巧，让你可以轻松地解决响应式设计下页面元素宽高比例不合适的问题。这些技巧包括使用 CSS 的 aspect-ratio 属性、使用 padding-top 属性、使用 SVG 的 viewBox 属性以及使用 JavaScript 动态计算宽高比例。选择合适的技巧，可以让你的页面在不同的屏幕大小下展现出最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65870eefd2f5e1655d151603