文章詳情頁
使用 CSS3 的 Media Query 瀏覽器會加載其他不同分辨率的 css 文件么
瀏覽：102日期：2023-08-11 16:18:02
問題描述
比如我分開寫了兩個根據分辨率不同情況下的 css 樣式：
<link rel='stylesheet' type='text/css' media='screen and (max-device-width: 400px)' href='http://www.gepszalag.com/wenda/tinyScreen.css' /><link rel='stylesheet' type='text/css' media='screen and (min-width: 400px) and (max-device-width: 600px)' href='http://www.gepszalag.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內創建jenkins訪問另一個容器下的服務器問題2. 如何解決Centos下Docker服務啟動無響應，且輸入docker命令無響應？3. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？4. css3 - 學習css構建圖形時，遇到一個很有意思的現象，具體代碼如下5. 極光推送 - Android app消息推送 百度 極光 個推 信鴿哪個好一些？6. javascript - js閉包作用域7. html5 - 百度echart官網下載的地圖json數據亂碼8. html - css 使用字體的時候,格式有什么特殊要求嗎?9. 微信開放平臺 - android 微信支付后點完成按鈕，后回調打開第三方頁面，屏幕閃動，求解決方法10. javascript - echart+百度地圖
排行榜
網公網安備