使用 CSS3 的 Media Query 瀏覽器會加載其他不同分辨率的 css 文件么

問題描述

比如我分開寫了兩個根據分辨率不同情況下的 css 樣式：

<link rel='stylesheet' type='text/css' media='screen and (max-device-width: 400px)' href='http://www.wxshucaidpc.com/wenda/tinyScreen.css' /><link rel='stylesheet' type='text/css' media='screen and (min-width: 400px) and (max-device-width: 600px)' href='http://www.wxshucaidpc.com/wenda/smallScreen.css' />

那么，我在寬度小于 400px 的分辨率下，smallScreen.css 是否會同時被加載？如果是，那么當調整分辨率時大于 400px 小于 600px，smallScreen.css 才開始加載么？

問題解答

首先，你需要學會使用工具看http請求，比如打開chrome瀏覽器，“control＋shift+i”打開開發者工具，切換到網絡的tab下，在這里你可以看到所有請求，當然包括css的加載，一看就知道css有沒有被加載以及什么時候被加載啦～

對于你的問題，瀏覽器會在一開始就加載所有的css文件，當然會有選擇的解析，比如當你旋轉pad的時候，device-width變化了，這時再去加載css就太慢啦～特別是當使用文檔寬度時（max-width），縮放瀏覽器的過程中width在不斷的變化，這時瀏覽器更加需要快速的重繪樣式～