有没有一种方法可以使用媒体查询逐步调整大小,而不是在预定宽度上进行调整?例如:
目前我有类似以下的代码:
@media screen and (max-width: 1024px) { }
现在,这只有在窗口达到神奇的1024px边界时才会调整大小...然而,我需要它在每个阶段都调整大小,而不仅仅是1024px。
如果用户将窗口缩小10%,则图像和字体大小也需要减小10%。
使用媒体查询是否可以实现此目的,还是我必须走JS路线?
谢谢。
有没有一种方法可以使用媒体查询逐步调整大小,而不是在预定宽度上进行调整?例如:
目前我有类似以下的代码:
@media screen and (max-width: 1024px) { }
只需使整个布局具有弹性。您可以使用width: 90%(或任何您喜欢的值)调整图像大小,或者如果您不希望图像放大,则使用max-width: 90%。
使用媒体查询或CSS逐渐调整文本大小是不可能的,但您真的不应该这样做。窗口较小的人无法阅读文本,而屏幕较大的人将不得不后退,因为文本太大。更不用说使用手机的人了。
是的,您可以使用vw和vh进行渐进式调整大小。但请注意浏览器支持情况。
.h1 {
font-size: 50vw;
}