如何在渲染前在窗口调整大小事件中修改CSS

How to modify CSS in window resize event before rendering?

本文关键字：小事件 大小事 修改 CSS 调整 窗口      更新时间：2023-09-26

我有两个带有style="float:left;"的div元素。我根据窗口的大小设置边距、宽度等。当窗口较小时，我会降低DIV的宽度和边距CSS属性值，使它们显示在一起（而不是下面）。

这在Firefox中看起来不错，但在Chrome和Opera中，DIV在我的JavaScript运行之前会跳到彼此下面一段时间。过了一会儿，屏幕又好看了。

问题是：有没有一种方法可以在浏览器上看到调整大小事件的效果之前捕获window.onresize事件并操纵CSS？

您可以使用媒体查询。这些是响应式设计的首选方法。

CSS

 div {
        margin-left: 20px;
    }
    @media (max-width: 600px) {
      div {
        margin-left: 5px;
      }
    }

在本例中，在宽度为600px或更低的屏幕上，div的margin-left为5px。这是CSS的一部分，所以不用等待加载，它会与CSS的其余部分一起加载。

这是因为Firefox在呈现页面之前等待javascript加载。Chrome和Opera显示页面，无论javascript是否已加载。尝试编写javascript，将受影响的主体最初设置为visibility: hidden;，并在javascript执行后将其更改为"visibility:visible；"。

更新：

在css中设置visibility: hidden;。

并将其添加到您的<head></head>:中

<noscript>
    body { visibility: visible; }
</noscript>

这将确保在加载javascript之前主体是不可见的。如果设备未启用javascript，则默认为visibility: visible;。

相关文章：