Question

我有两个DIV元素，style =“float：left;”。我根据窗口的大小设置边距，宽度等。当窗口较小时，我会降低DIV的宽度和边距CSS属性值，使它们看起来彼此相邻（不在下面）。

这在firefox中看起来不错，但是在Chrome和opera中，DIV在我的javascript运行之前跳了一会儿。过了一会儿，屏幕再次显得很漂亮。

问题：在浏览器上看到resize事件的效果之前，有没有办法捕获window.onresize事件并操纵CSS？

Answer 1

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

CSS

 div {
        margin-left: 20px;
    }

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

在此示例中，div在宽度为600px或更低的屏幕上将具有margin-left 5px。这是你CSS的一部分，所以没有等待加载的东西，它加载你的其余CSS。

Answer 2

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

更新

在css中设置visibility: hidden;。

并将其添加到<head></head>：

中

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

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

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

2 个答案: