使用@media規則的響應式網頁設計和網頁的總大小

Question

@media規則的目的是在視口大小調整時應用各種CSS設置。

如果我以響應菜單爲例，當視口變小時，我們用選擇框替換水平菜單欄，我將爲選擇框和水平菜單都設置代碼。這樣我可以在視口變化時隱藏他們中的任何一個。與爲小視口替換圖像一樣。另外，不同視圖端口的所有CSS都將在客戶機上加載。

我覺得它會增加整個網頁的大小。

請讓我知道，如果我們可以做一些條件加載，或者如果有其他有效的替代方案。

我弄清楚的一個方法是在服務器端基於user-agent放置一些條件。但它不適用於HTML網站，並需要大量的服務器端代碼。

Answer 1

如果您可以專注於圖像大小而不是HTML文件的大小，那麼這裏有一些想法。

• Adaptive Images檢測屏幕尺寸，並自動提供相應大小的圖像（根據斷點設置）。它可以追溯到一個網站，很容易檢查它是否是一個很好的解決方案。

• 使用背景圖像創建div意味着您可以在不同的視口輕鬆指定不同的背景圖像，因此與加載縮小的移動圖像相比，這將更有效。

• Foundation from Zurb剛剛推出Interchange這的確類似於自適應數字圖像的東西，服務設備合適的圖片

希望這些方法之一可能會爲你工作。祝你好運！