logo标签列表

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

htmlcssmedia-queries
3

我正在创建一个网站，已经成功地使用外部CSS文件创建了针对移动设备和桌面设备的媒体查询。您可以看到下面的HTML链接到外部样式表；mobile.css用于<767px的设备，desktop.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在正确的情况下工作，但是当屏幕宽度超过1000px时，它只会保留tablet.css，而不应用desktop.css。
我的问题是，我是否需要为1000px以上的设备添加第三个CSS文件？
任何帮助将不胜感激。
谢谢，
Philpot
2个回答
6

虽然不知道具体的方法，但是可以试试这个：

 <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" />
-3
感谢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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接