在响应式网页设计中如何下载网页组件？

Question

我刚开始致力于响应式网页设计。媒体查询是否处理下载组件或处理过程的位置？这个问题的原因是，当我们在我们的网页中使用不同大小的图像时，例如已经为智能手机下载1x图像，为平板电脑下载2张图像，为桌面浏览器下载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描述。