問題描述

比如我分開寫了兩個(gè)根據(jù)分辨率不同情況下的 css 樣式：

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

那么，我在寬度小于 400px 的分辨率下，smallScreen.css 是否會(huì)同時(shí)被加載？如果是，那么當(dāng)調(diào)整分辨率時(shí)大于 400px 小于 600px，smallScreen.css 才開始加載么？

問題解答

首先，你需要學(xué)會(huì)使用工具看http請(qǐng)求，比如打開chrome瀏覽器，“control＋shift+i”打開開發(fā)者工具，切換到網(wǎng)絡(luò)的tab下，在這里你可以看到所有請(qǐng)求，當(dāng)然包括css的加載，一看就知道css有沒有被加載以及什么時(shí)候被加載啦～

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