使用 CSS3 的 Media Query 浏览器会加载其他不同分辨率的 css 文件么

问题描述

比如我分开写了两个根据分辨率不同情况下的 css 样式：

<link rel='stylesheet' type='text/css' media='screen and (max-device-width: 400px)' href='https://www.haobala.com/wenda/tinyScreen.css' /><link rel='stylesheet' type='text/css' media='screen and (min-width: 400px) and (max-device-width: 600px)' href='https://www.haobala.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在不断的变化，这时浏览器更加需要快速的重绘样式～