Question

我正在创建一个网站，并成功创建了外部CSS文件的媒体查询，用于移动和桌面样式。您可以在下面看到链接到外部工作表的HTML; mobile.css用于设备＆lt; 767px，desktop.css用于设备＆gt; 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，并为超过1000px的设备创建新的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正常运行但是当它超过1000px而不是应用desktop.css时它只保留了tablet.css。

我的问题是，我是否会为1000px以上的设备添加第三个CSS文件？

非常感谢任何帮助。

谢谢，

菲尔波特

Answer 1

完全不知道这个方法，但是这个怎么样：

 <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" />

Answer 2

感谢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>

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

2 个答案: