0

かなり初心者の質問ですが、私は現在、レスポンシブWebサイトを作成するためにAnyClarkeの320andupテンプレートを使用しています。

736px以上のメディアクエリからinspect要素を見るとブラウザによって取得されないように見えるかなりの数のCSSルールを除いて、すべてが順調に進んでいますが、それでも基本レベル（320モバイル）からルールを取得するだけです。 ）および/または480および600ピクセルの指定された幅。

Firefoxでは問題はなく、Chromeでのみ問題が発生します。（クロームで無視されているように見える属性は以下にコメントされています）私はまだIEをチェックしていません、誰かがこれに対する答え/大きな修正をしてください？

例えば、

base level (320px)
.content { clear: both;margin: 10px auto;width: 92%;}     
ul.social li{text-align:right;list-style:none;}


@media only screen and (min-width: 480px) {

ul.social li{text-align:right;list-style:none;}

.content {clear: both;margin: 100px auto;width: 92%;}

}

@media only screen and (min-width: 992px) {

ul.social li{ text-align:right; list-style:none; /*this ignored --> */display:inline;}

.content{ clear:both; /*this ignored --> */ margin-left:200px;}

}

詳細については、ここにあるコア320andupファイル：https ：//github.com/malarkey/320andup/blob/master/css/320andup.css

4

1 に答える 1

0

この行：

@media only screen and (min-width: 992px)

コードを開始する前に、画面の幅を992px以上にする必要があることを意味します。したがって、736pxがそれらを表示していないという事実は、私を驚かせません（FFがそれを表示していた場合、あなたが示唆しているように、それは私を驚かせます）。これは、ブラウザウィンドウの幅が992px（736pxが狭すぎる）になるまで、これらのスタイルを使用しないようにする必要があるためです。例を参照してください。

早く参加させたい場合は、番号を変更します（次のようなもの）。

@media only screen and (min-width: 730px)
于 2012-05-02T13:31:58.267 に答える