通过缩放更改布局

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，则必须为较小的设备编写媒体查询代码并尝试进行实验。