首页 > 开发 > CSS > 正文

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

2017-09-12 09:40:16  来源: 网友分享

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

<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 400px)" 
href="tinyScreen.css" />

<link rel="stylesheet" type="text/css" 
media="screen and (min-width: 400px) and (max-device-width: 600px)" 
href="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在不断的变化,这时浏览器更加需要快速的重绘样式~