8

これは私を狂わせています！Stackoverflow に関するいくつかの質問を調べたところ、ID 要素がクラス要素よりも優先されることがわかりました (これは知っておくとよいのですが、これは私の問題ではないと感じています)。私が苦労しているのは私のNAVIGATIONメニューです。（私は最大幅ところで使用します）

私の NAV の一般的な CSS は次のとおりです。

nav{ float:right; margin-left:2%;}
nav ul{ float:left; list-style:none; width:100%;}
nav ul li{ float:left; margin-left:5px; }
nav a{ display:inline-block; float:left; color:#f0f0f0; text-transform:uppercase; 
font-family:TrumpGothicWestRegular; font-size:1.5em; padding: 100px 20px 20px 20px; }

ビューポートが 1140px 未満の場合、CSS でメニューを次のように変更します。

nav ul li{ float:left;}
nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}

したがって、基本的に、メニューは上部のパディングを減らして左にフロートします。

ビューポートが 800px 未満の場合、CSS でメニューを次のように変更します。

nav ul li{ float:none;}
nav a{ float:none; padding: 20px 20px 20px 20px;}

ご覧のとおり、NAV Float を NONE に変更しただけです

テストすると、GENERAL CSS はビューポートが 1140px 未満の場合と同様に正常に動作しますが、800px 未満になるとすぐに NAV が左にフロートします!!?? 1140pxのCSSメディアクエリを継承している模様？何か案は？

更新:これは、メディアクエリを定義する方法です

<link rel="stylesheet" media="only screen and (max-width: 800px), only screen and 
(max-device-width: 800px)" href="small-device800.css" />
<link rel="stylesheet" media="only screen and (max-width: 1140px), only screen and 
(max-device-width: 1140px)" href="small-device1140.css" />
4

3 に答える 3

9

メディアクエリに問題があるのではないでしょうか? 次のようなことを試してください：

@media all and (min-width: 1140px) {
    nav ul li { float:left; }
}

@media all and (max-width: 1139px) and (min-width: 800px) {
    nav ul li { float:left; }
}

@media all and (max-width: 799px) {
    nav ul li { }
}
于 2012-05-30T12:16:57.563 に答える
1

テスト ケースの jsFiddle は次のとおりです。 http://jsfiddle.net/RJm3c/1/

http://jsfiddle.net/RJm3c/1/embedded/result/ <- ブラウザーのサイズを変更して結果を確認します

CSS:

  nav{ float:right; margin-left:2%;}
  nav ul{ float:left; list-style:none; width:100%;}
  nav ul li{ float:left; margin-left:5px; }
  nav a{ display:inline-block; float:left; text-transform:uppercase;}
  /*for test only*/
  body{ background-color: green}

  @media only screen and (max-width: 1140px), only screen and (max-device-width: 1140px) {
    nav ul li{ float:none;}
    nav a{ float:none; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: red}
  }

  @media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    nav ul li{ float:left;}
    nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: blue}
  }

</p>

于 2012-05-30T12:36:49.247 に答える