如何在响应式网页设计中下载网页的组件？
How components of a web page are downloaded in responsive web design?
我刚刚开始从事响应式网页设计。媒体查询是否处理下载组件或处理流程的位置？这个问题的原因是当我们在我们的网页中使用不同大小的图像时，例如为智能手机下载 1x 图像，为平板电脑下载 2x 图像，为桌面浏览器下载 4x 图像。是否会为所有浏览器下载所有大小的图像，或者在响应式网页设计中如何处理？它如何适用于所有 Web 组件？
我将描述每种资产的策略。
图片
条件加载的全部思想是不加载尺寸大于需要的图像。
articles，您可以在这方面找到非常有道理的，但实施起来仍然有点棘手，因为最终解决方案将主要依赖于后端。
最常用的技术相当简单：使用 JavaScript 方法进行屏幕 width/device 检测并加载相应的图像大小。
CSS
对于条件加载，您可以使用 <link> 标记的媒体属性。该属性用于指定 @media 查询，它将控制加载。
这里有一篇关于Conditional loading of resources with media queries的文章，详细解释了属性的用法。虽然很老了，但规则到今天还是一样。
JavaScript
JavaScript 资产的控制权完全由您决定。我不打算谈论模块加载器。
Window.matchMedia() is the media-query based condition checker, that can be used for asset loading, if you're satisfied with browser-support.
已过时，但更加用户友好 window.outerWidth
浏览器检测说明如下question.
我刚刚开始从事响应式网页设计。媒体查询是否处理下载组件或处理流程的位置？这个问题的原因是当我们在我们的网页中使用不同大小的图像时，例如为智能手机下载 1x 图像，为平板电脑下载 2x 图像，为桌面浏览器下载 4x 图像。是否会为所有浏览器下载所有大小的图像，或者在响应式网页设计中如何处理？它如何适用于所有 Web 组件？
我将描述每种资产的策略。
图片
条件加载的全部思想是不加载尺寸大于需要的图像。
articles，您可以在这方面找到非常有道理的，但实施起来仍然有点棘手，因为最终解决方案将主要依赖于后端。
最常用的技术相当简单：使用 JavaScript 方法进行屏幕 width/device 检测并加载相应的图像大小。
CSS
对于条件加载，您可以使用 <link> 标记的媒体属性。该属性用于指定 @media 查询，它将控制加载。
这里有一篇关于Conditional loading of resources with media queries的文章，详细解释了属性的用法。虽然很老了，但规则到今天还是一样。
JavaScript
JavaScript 资产的控制权完全由您决定。我不打算谈论模块加载器。
Window.matchMedia() is the media-query based condition checker, that can be used for asset loading, if you're satisfied with browser-support.
已过时，但更加用户友好 window.outerWidth
浏览器检测说明如下question.