为什么浏览器会下载不匹配媒体查询的样式表

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适用于您旅程每个阶段的云产品。立即开始使用 $200 免费积分!

假设您有一个像这样链接的样式表

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

但是当页面加载时,您在屏幕宽度为 1753px 的桌面浏览器上。浏览器应该直接跳过加载该样式表,对吧?并非如此。 Thomas Steiner 解释道

事实证明,CSS 规范编写者和浏览器实现者在这方面非常聪明

问题是,用户始终可以决定调整窗口大小(影响宽度、高度、纵横比),打印文档等,甚至是一眼看上去是静态的(例如分辨率)也可以改变,当用户使用多屏幕设置将窗口从例如 Retina 笔记本屏幕移动到更大的桌面显示器时,或者用户拔掉了鼠标,等等。

浏览器会做的事情(呵呵,💩)是应用一个 最低 下载优先级.

直接链接 →