使用@media规则和网页总大小的响应式网页设计

时间:2013-06-22 14:17:23

标签: performance responsive-design

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

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

我觉得它会增加网页的整体尺寸。

请告诉我,如果我们可以进行一些有条件的装载,或者是否有其他有效的替代方案。

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

1 个答案:

答案 0 :(得分:1)

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

  • Adaptive Images检测屏幕大小并自动传送适当大小的图像(根据您设置的断点)。它可以追溯应用于网站,因此很容易检查它是否适合您。

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

  • Foundation from Zurb刚刚介绍了Interchange,其功能类似于自适应图像,为设备提供适当的图像

希望其中一种方法可能适合您。祝你好运!