媒体查询：三个外部 CSS 文件答案

【问题标题】：Media queries: Three external CSS files媒体查询：三个外部 CSS 文件
【发布时间】：2018-02-12 00:04:52
【问题描述】：

我正在创建一个网站，并已成功使用外部 CSS 文件为移动设备和桌面样式创建媒体查询。您可以看到下面的 HTML 链接到外部工作表； mobile.css 用在 768px 的设备上。

<head>
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" />
    <link rel="stylesheet" media="screen and (min-width: 768px)" href="css/desktop.css" />
</head>

在设计完网站后，我相信我可以让它更具响应性，并希望将 desktop.css 更改为 tablet.css 并为超过 1000 像素的设备创建一个新的 desktop.css。但是，将以下外部 CSS 与媒体查询链接不起作用：

<head>
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" /> <!-- This works fine -->
    <link rel="stylesheet" media="screen and (min-width: 768px)" href="css/tablet.css" /> <!-- This works fine -->
    <link rel="stylesheet" media="screen and (min-width: 1000px)" href="css/desktop.css" /> <!-- Doesn't work -->
</head>

以上产生的 mobile.css 工作正常，tablet.css 正常工作，但它只是在超过 1000 像素时保留 tablet.css，而不是应用 desktop.css。

我的问题是我是否会为超过 1000 像素的设备添加第三个 CSS 文件？

任何帮助将不胜感激。

谢谢，

菲尔波特

【问题讨论】：

标签： html css media-queries

【解决方案1】：

感谢 Daniel Wiecek 的回答，它为我指明了正确的方向，我已经弄清楚了。要为移动设备、平板电脑和桌面设备提供三个 CSS 外部文件，下面的 HTML 可以工作：

<head>
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" />
    <link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 999px)" href="css/tablet.css" />
    <link rel="stylesheet" media="screen and (min-width: 1000px)" href="css/desktop.css" />
</head>

【讨论】：

【解决方案2】：

不知道具体的方法，但是这个怎么样：

 <link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 999px)" href="css/tablet.css" />

或

 <link rel="stylesheet" media="screen and (min-width: 768px,max-width: 999px)" href="css/tablet.css" />

【讨论】：