0

我有两个样式为“float:left;”的 DIV 元素。我根据窗口的大小设置边距、宽度等。当窗口较小时，我会降低 DIV 的宽度和边距 CSS 属性值，以使它们彼此相邻（不在下方）。

这在 Firefox 中看起来不错，但是在 chrome 和 opera 中，DIV 在我的 javascript 运行之前会相互跳动一会儿。片刻之后，屏幕又好看了。

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

4

2 回答 2

2

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

CSS

 div {
        margin-left: 20px;
    }

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

在此示例中，div 将在margin-left600 像素或更低宽度的屏幕上显示 5 像素。这是您的 CSS 的一部分，因此无需等待加载，它会与您的其余 CSS 一起加载。

于 2013-07-29T19:29:44.490 回答
0

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

更新：

visibility: hidden;在 css 中设置。

并将其添加到您的内部<head></head>：

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

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

于 2013-07-29T19:26:46.733 回答