在響應式網頁設計中如何下載網頁組件？

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描述。