0

@media 规则的目的是在调整视口大小时应用各种 CSS 设置。

如果我举一个响应式菜单的例子，当视口减小时，我们用选择框替换水平菜单栏，我将为选择框和水平菜单提供代码。这样当视口发生变化时我可以隐藏它们中的任何一个。与替换小视口的图像相同。此外，不同视口的所有 CSS 都将在客户端机器上加载。

我觉得它会增加网页的整体大小。

请让我知道，如果我们可以进行一些条件加载，或者是否有其他有效的替代方案。

我想出的一种方法是在用户代理的基础上在服务器端设置一些条件。但它不适用于 HTML 网站，并且需要大量服务器端代码。

4

1 回答 1

1

如果您可以专注于图像大小而不是 HTML 文件的大小，这里有一些想法。

  • 自适应图像检测屏幕尺寸并自动提供适当尺寸的图像（基于您设置的断点）。它可以追溯应用到站点，因此很容易检查它是否适合您。

  • 使用背景图像创建 div 意味着您可以轻松地在不同的视口指定不同的背景图像，因此这将比加载为移动设备缩小的全尺寸图像更有效。

  • 来自 Zurb 的 Foundation刚刚介绍了Interchange，它执行类似于自适应图像的功能，为设备提供适当的图像

希望其中一种方法可能对您有用。祝你好运！

于 2013-06-23T11:25:48.040 回答