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

Question

我有两个带有style="float:left;"的 DIV 元素 . 我根据窗口的大小设置边距、宽度等。 当窗口较小时，我会降低 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 在宽度为 600 像素或更低的屏幕上将具有 5 像素的margin-left 。 这是您的 CSS 的一部分，因此无需等待加载，它会与您的其余 CSS 一起加载。

Answer 2

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

更新：

设置visibility: hidden; 在 CSS 中。

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

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

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

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

问题描述

2 个解决方案

解决方案1
2 2013-07-29 19:29:44

解决方案2
0 2013-07-29 19:26:46

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

问题描述

2 个解决方案

解决方案1 2 2013-07-29 19:29:44

解决方案2 0 2013-07-29 19:26:46

解决方案1
2 2013-07-29 19:29:44

解决方案2
0 2013-07-29 19:26:46