文章詳情頁
使用 CSS3 的 Media Query 瀏覽器會加載其他不同分辨率的 css 文件么
瀏覽：100日期：2023-08-11 16:18:02
問題描述
比如我分開寫了兩個根據分辨率不同情況下的 css 樣式：
<link rel='stylesheet' type='text/css' media='screen and (max-device-width: 400px)' href='http://www.intensediesel.com/wenda/tinyScreen.css' /><link rel='stylesheet' type='text/css' media='screen and (min-width: 400px) and (max-device-width: 600px)' href='http://www.intensediesel.com/wenda/smallScreen.css' />
那么，我在寬度小于 400px 的分辨率下，smallScreen.css 是否會同時被加載？如果是，那么當調整分辨率時大于 400px 小于 600px，smallScreen.css 才開始加載么？
問題解答
回答1：首先，你需要學會使用工具看http請求，比如打開chrome瀏覽器，“control＋shift+i”打開開發者工具，切換到網絡的tab下，在這里你可以看到所有請求，當然包括css的加載，一看就知道css有沒有被加載以及什么時候被加載啦～
對于你的問題，瀏覽器會在一開始就加載所有的css文件，當然會有選擇的解析，比如當你旋轉pad的時候，device-width變化了，這時再去加載css就太慢啦～特別是當使用文檔寬度時（max-width），縮放瀏覽器的過程中width在不斷的變化，這時瀏覽器更加需要快速的重繪樣式～
標簽：
CSS
相關文章：
1. docker容器呢SSH為什么連不通呢？2. docker - 如何修改運行中容器的配置3. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””4. docker start -a dockername 老是卡住，什么情況？5. Android TextView 或 ListView 加載過渡效果6. docker - 各位電腦上有多少個容器啊？容器一多，自己都搞混了，咋辦呢？7. python - thrift 返回 TSocket read 0 bytes 求助!!!!8. python3.x - python中import theano出錯9. python - （初學者）代碼運行不起來，求指導，謝謝！10. python - django模板 include模板的數據問題
排行榜
網公網安備