给出以下链接标记:
<link rel="stylesheet" href="xlarge.css" media="max-width: 70em" />
<link rel="stylesheet" href="large.css" media="max-width: 60em" />
<link rel="stylesheet" href="medium.css" media="max-width: 50em" />
<link rel="stylesheet" href="small.css" media="max-width: 40em" />
<link rel="stylesheet" href="xsmall.css" media="max-width: 30em" />
<link rel="stylesheet" href="retina.css" media="(-webkit-min-device-pixel-ratio: 2)" />
在初始加载时,是否已下载这些样式表中的六个,或者只是那些媒体查询已解析为真的样式表?例如,如果我在具有视网膜功能的浏览器上计算出中断点,那么它只会产生四个http请求吗?
最佳答案 无论媒体查询评估为true还是false,都将下载所有样式表.即使是前五个媒体查询,由于max-width表达式周围缺少括号而无效,也不会阻止浏览器请求这些样式表. (无效的媒体查询会自动解析为false.)
在CSS中,媒体查询仅控制这些样式表中的CSS规则是否应用于您的页面,而不是样式表本身是否被请求.