使用@media 加载样式

Question

如果我输入：

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

或

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

在 <600px 的屏幕上样式不适用，但是 css 文件是否会被下载？

Answer 1

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

只有在 media 中的陈述为真时才会实际使用 CSS 文件。

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

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

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

Answer 2

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

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

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

Answer 3

根据 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;}

无论 window 大小如何，网络检查器显示的内容如下：

当页面超过 600px 时，背景只有蓝色。

使用@media 加载样式

Loading styles with @media

css

media-queries

responsive-design