Phi*_*pot 2 html css media-queries
我正在创建一个网站，并成功地使用外部 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 并为超过 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 时它只会保留 tablet.css 而不是应用 desktop.css。
我的问题是我会为超过 1000 像素的设备添加第三个 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: 768px,max-width: 999px)" href="css/tablet.css" />
| 归档时间： |
|
| 查看次数： |
5685 次 |
| 最近记录： |