具有单独 CSS 文件的 CSS3 媒体查询

Question

我想创建一个特定于移动设备的不同CSS文件。我已经能够检测该设备是否是移动设备，但是，只有当我在同一个文件中定义了带有@media语句的所有样式时。

我

宁愿将文件分开，而我无法实现，并希望您告诉我如何实现。

<link type="text/css" rel="stylesheet" href="css/combined.css" media="screen" />

组合.css：（这有效，但所有样式都在同一个 CSS 文件中）

// for desktop browsers
@media only screen and (min-width: 1000px) {
    h1 { text-decoration: none; }
}
// for mobile devices
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    h1 { text-decoration: underline; }
}

当我试图将它们分开时...

<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/mobile.css" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)" />

桌面.css：

h1 { text-decoration: none; }

手机.css：

h1 { text-decoration: underline; }

。它不再起作用了。为什么？我怎样才能让它工作？

Answer 1

您如何检测设备是否为移动设备？你用的是PHP吗？

如果是这种情况，那么您可以根据is_mobile标志轻松包含正确的文件。

<?php if(!$is_mobile) { ?>
    <link type="text/css" rel="stylesheet" href="css/desktop.css" />
<?php } else { ?>
    <link type="text/css" rel="stylesheet" href="css/mobile.css" />
<?php } ?>