使用@media 加载样式 [重复]答案

【问题标题】：Loading styles with @media [duplicate]使用@media 加载样式 [重复]
【发布时间】：2016-01-22 23:27:34
【问题描述】：

如果我输入了：

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

或者

@media screen and (min-width: 600px) {
      // Import code
}

【问题讨论】：

标签： css responsive-design media-queries

【解决方案1】：

根据 Chrome 网络检查器，是，该文件仍将被下载。

这是我的测试设置：

- index.php
- css
   - main.css 
   - light.css

我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/light.css" media="screen and (min-width: 600px)">
</head>
<body>
    <h1>Hello world</h1>
</body>
</html>

main.css 为空，light.css 包含以下内容：

body{background-color: blue;}

无论窗口大小如何，网络检查器都会显示以下内容：

只有当页面超过 600 像素时，背景才会显示为蓝色。

【讨论】：

【解决方案2】：

无论您设置的media 值如何，都将始终下载 CSS 文件。

真正使用 CSS 文件的唯一时间是media 中的语句是否为真。

作为演示，下面加载了 2 个实际不存在的 CSS 文件，因此会在浏览器的控制台日志中出错。 media 将失败，但文件仍会尝试下载文件。

<link rel="stylesheet" media="screen and (min-width: 10000px)" href="small.css" />
<link rel="stylesheet" href="normal.css" />

您可以通过以下链接了解有关 CSS 媒体查询的更多信息：

【讨论】：

【解决方案3】：

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

如果这就是您所要求的，那么无论视口是什么，外部 HTTP 请求仍然存在？唯一不会发生的是，如果视口低于 600 像素，样式本身不会生效。

您为什么不尝试使用 Chrome 模拟器并在 600 像素以下的视口检查“网络”选项卡上的页面，然后重新加载您收到此请求的页面，看看它是否确实以 200 的状态请求它（好的）。

【讨论】：