CSS媒体查询-渐进式调整大小？

Question

有没有一种方法可以使用媒体查询逐步调整大小，而不是在预定宽度上进行调整？例如：

目前我有类似以下的代码：

@media screen and (max-width: 1024px) { }

现在，这只有在窗口达到神奇的1024px边界时才会调整大小...然而，我需要它在每个阶段都调整大小，而不仅仅是1024px。

如果用户将窗口缩小10％，则图像和字体大小也需要减小10％。

使用媒体查询是否可以实现此目的，还是我必须走JS路线？

谢谢。

- ABailiss

---

我相信你必须使用JS。你可能能够使用CSS表达式取得一些进展，但这也不是理想的选择。 - Michael Mior

Answer 1

只需使整个布局具有弹性。您可以使用width: 90％（或任何您喜欢的值）调整图像大小，或者如果您不希望图像放大，则使用max-width: 90％。

使用媒体查询或CSS逐渐调整文本大小是不可能的，但您真的不应该这样做。窗口较小的人无法阅读文本，而屏幕较大的人将不得不后退，因为文本太大。更不用说使用手机的人了。

- Gerben

---

公正的观点，但这并不会在窗口调整大小时重新缩放图像或文本，以保持页面结构不变？ - ABailiss

我倾向于混合“响应式”和“灵活”的设计。我目前正在使用的一种布局是将主要内容与右/左固定边距（因此框的宽度始终随浏览器宽度而变化），但整个布局在特定的宽度断点处进行调整（使用媒体查询）。 - doubleJ

Answer 2

是的，您可以使用vw和vh进行渐进式调整大小。但请注意浏览器支持情况。

.h1 {
    font-size: 50vw;
}

- user2245534