0 
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" href="handheld.css" type="text/css" media='screen and (max-device-width: 480px)'/>

HTMLドキュメントの上部にこれらの2行があります。最初のスタイル シートは私の典型的なスタイル シートで、2 番目のスタイル シートはブラウザーがモバイル デバイスを検出したときに読み込まれるモバイル スタイル シートです。両方のスタイルシートが互いの上に読み込まれます。ロードされたindex.cssときの効果を無効にすることは可能でしょうか?handheld.css

4

2 に答える 2

5

スタイルシート自体をキャンセルすることはできませんが、CSS ルールをオーバーライドすることで、以前のスタイルシートの効果を無効にすることができます。

3 番目のスタイルシートを使用するか、メディア クエリ ルールを適用して、非モバイル デバイスにのみ適用される CSS を作成することもできます。お気に入り：

<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" href="desktop.css" type="text/css" media='screen and (min-device-width: 481px)'/>
<link rel="stylesheet" href="handheld.css" type="text/css" media='screen and (max-device-width: 480px)'/>

これらのアプローチでは、CSS3 最小/最大メディア クエリのサポートが必要であることに注意してください。それができないブラウザー (IE6/IE7/IE8) をサポートする必要がある場合は、Respond ( https://github.com/scottjehl/Respond )のようなポリフィルを使用してください。

于 2013-07-24T19:03:41.720 に答える
2

メディア クエリでは、「キャンセル」することはできませんが、使用を「停止」することはできません。

このようなもの ：

<link href="base.css" rel="stylesheet"/>

/* this next will be only used when **screen** AND min-width big screen */
<link href="desktop.css"
    media="only screen and (min-width: 801px)" rel="stylesheet"/>

/* this next will be only used when it's a tablet */
<link href="tablet.css"
    media="only screen and (min-width: 629px) and (max-width: 800px) and
    (orientation:portrait),
    only screen and (min-height:629px) and (max-height:800px) and
    (orientation:landscape)" rel="stylesheet"/>

/* this next will be used only when but .. you figured it out */
<link href="desktop.css"
    media="only screen and (min-width: 801px),
    not only screen and (min-height:629px) and (max-height:800px) and
    (orientation:landscape)" rel="stylesheet"/>

このSOの回答を見て、 MozDevNetwork について少し勉強することができます

于 2013-07-25T13:49:27.913 に答える