responsive-design - 视口过滤会影响下载网页的文件大小吗？

Question

我们一直在讨论网页响应性如何非常有效地消除制作网站移动版本的需要，但我们想知道；是的，在移动设备上查看的其他元素是隐藏的，这是否意味着浏览器只下载了所需的内容，或者是整个网页但隐藏了其他元素？

问候， Gafes

Answer 1

响应式开发——如果做得好——不应该在不同的视口宽度之间显示或隐藏元素，标记中不应该有任何特定的重复或冗余，这一切都是从前端用 CSS 完成的，为这些 HTML 元素提供不同的外观基于当前视口宽度。

也就是说，标记本身不可避免地需要进行一些细微的更改和添加，以适应页面的响应方面（额外的类名等），因此 HTML 页面本身的大小会稍大一些。

CSS 文件会更大，因为它们包含更多声明。

就实际带宽使用而言：“表现良好”的响应式浏览器只会下载它需要的资产（即：当时与该设备直接相关的媒体查询中的背景图片/等）——这很像任何浏览器和隐藏元素：大多数浏览器不会下载隐藏元素的背景图像，直到该元素在页面上可见。

有一个例外：过去有报道称 Apple iPad 从与它无关的媒体查询中下载资产，但我一年多没有看到它讨论过，也无法用我们拥有的硬件复制它在办公室。我相信这是移动 Safari 中的一个错误，后来被修复。