2

モバイル デバイス専用の別の 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)" />

デスクトップ.css:

h1 { text-decoration: none; }

mobile.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 に答える