Question

我的目标是在缩放时更改我的布局，就像我使用窗口调整大小事件更改布局一样。

经过大量搜索后，我得出结论，您无法在每个浏览器中检测到缩放事件。因此，我得出结论，我应该使用@media查询进行缩放，就像我调整窗口大小一样。

话虽如此，这是我的@media查询的样子：

/* LARGE window */
@media (min-width: 601px) {
    .mainContent {
        font-size: 125%;
    }

    .infoHeaderTextStyle {
        font-size: 160%;
    }
}

/* SMALL window */
@media (max-width: 600px) {
    .mainContent {
        font-size: 100%;                                             
    }

    .infoHeaderTextStyle {
        font-size: 100%;
    }
}

非常适合调整窗口大小。

因此，对于缩放，@media ??

后面的规则是什么是吗？

@media (font-size > 20px) {
   /* ZOOMED IN */
}

@media (font-size <= 20px) {
   /* ZOOMED OUT */
}

Answer 1

在缩放宽度为1000px到200％的屏幕时，浏览器会将其宽度设置为500px，并将样式应用于@media（max-width：500px）{}。

希望你明白这一点。如果你想为缩放编写css，你必须为较小的设备编写媒体查询代码并尝试进行试验。

通过缩放更改布局

1 个答案: