1

誰かが私を正しい方向に向けることができますか？クエリを意図したとおりに機能させることができません。

だから、私は例えば：

<link rel="stylesheet" href="/480.css" type="text/css" media="screen and (max-width:480px)" />
<link rel="stylesheet" href="/768.css" type="text/css" media="screen and (max-width:768px)" />
<link rel="stylesheet" href="/960.css" type="text/css" media="screen and (min-width:960px)" />

480スタイルシートの場合：

#box{width:100px;height:100px;}

960スタイルシートの場合：

#box{width:200px;height:200px;}

ブラウザのサイズを480px以下に変更すると、960スタイルが480スタイルを上書きします。1つのスタイルシートにすべてのクエリをロードしようとしましたが、解像度ごとに別々のスタイルシートを使用しようとしましたが、まだ機能しません。ChromeまたはFFAuroraでテストする場合、違いはありません。

私は何が間違っているのですか？ありがとう！

4

2 に答える 2

1

私にとっては完璧に機能します：http： //felixebert.de/so-12811458/

  • cssファイルへのパスは正しいですか？
  • HTML Doctypeは正しいですか（<!DOCTYPE html>）？
  • id-referenceとclass-referenceを混在させていますか？（#box =、.box <div id="box" />= <div class="box" />）
  • 768.cssには何が含まれていますか？
于 2012-10-10T03:38:40.457 に答える
0

これを試して：

<style>
@media screen and (max-device-width: 480px),
screen and (max-width: 960px) {
#box{width:100px;height:100px;outline:1px solid red;}
}
/* Still small! (but scaling up) */
@media screen and (min-width: 960px) {
#box{width:200px;height:200px;outline:1px solid red;}
}
</style>

http://jsfiddle.net/sthAngels/EecJD/

于 2012-10-10T06:22:20.290 に答える