在响应式网页设计中如何下载网页的组件？ [关闭]

Question

我刚刚开始从事响应式网页设计。媒体查询是否处理下载组件或处理过程的位置？这个问题的原因是当我们在网页中使用不同大小的图像时，例如为智能手机下载 1x 图像，为平板电脑下载 2x 图像，为桌面浏览器下载 4x 图像。是否将为所有浏览器下载所有大小的图像，或者在响应式网页设计中如何处理？它如何适用于所有 Web 组件？

Answer 1

我将描述每种资产的策略。

图片

条件加载的整个想法是不加载尺寸大于所需的图像。

articles，你可以在这件事上找到非常有意义的，但它们仍然有点难以实施，因为最终的解决方案将主要依赖于后端。

最常用的技术相当简单：您使用 JavaScript 方法来检测屏幕宽度/设备并加载相应的图像尺寸。

CSS

对于条件加载，您可以使用<link> 标签的媒体属性。该属性用于指定@media 查询，它将控制加载。

这里有一篇关于Conditional loading of resources with media queries的文章，详细解释了该属性的用法。它很古老，但即使在今天，规则也是一样的。

JavaScript

JavaScript 资产的控制权完全取决于您。我不会谈论模块加载器。

Window.matchMedia() 是基于媒体查询的条件检查器，如果您对browser-support 满意，可用于资产加载。

已过时，但对用户更友好window.outerWidth

浏览器检测在下面question中描述。