2

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

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

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

combine.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; }

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

4

1 回答 1

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 } ?>
于 2012-12-10T12:47:49.113 回答