Question

我想创建一个专门针对移动设备的不同CSS文件。我已经能够检测到该设备是否是移动设备，但是，只有我已经定义了所有样式与@media语句相同的文件。

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

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

combined.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)" />

desktop.css：

h1 { text-decoration: none; }

mobile.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 } ?>

使用单独的css文件进行CSS3媒体查询

1 个答案: