0

cssメディアクエリについていくつか質問があります。

I.両方のcssファイル（たとえば、normal.cssとlessthan1024.css）にすべてのcssルールを含める必要がありますか？または、lessthan1024.cssに異なるルールだけを含めることはできますか？

II。ブラウザのサイズ変更で動作しますか？または、ページを更新する必要がありますか？

ありがとう

4

1 に答える 1

2

I.解像度に関係なく、背景が青色のヘッダーが必要だとします。異なるものだけをファイルに含める場合lessthan1024.css、それは1024px未満のヘッダーの青い背景がないことを意味します。では、この場合のあなたの質問に対する答えは何だと思いますか？

II。ブラウザウィンドウのサイズ変更に使用できます。更新なし。

そうは言っても、私はおそらく次の方が良いと思います。

I.モバイルファーストのアプローチを使用します。つまり、最小のディスプレイサイズから始めて、より大きなディスプレイに合わせてページの外観を調整します。

II。@mediaルールを使用して、すべての表示サイズのすべてのCSSを1つのファイルに入れます。例：

/* base styling: common rules + smallest display rules*/

@media only screen and (min-width: 35em) {
    /* adjust style for larger display */
}

これが優れていると私が信じる理由は...まあ、2つの.cssファイルを使用すると、いくつかのルールが重複するからです。それらのいくつかを変更したいとしましょう。2か所で同じ変更を加える必要があります。1つのファイルで変更を加えるのを忘れているかもしれません。または、一方のファイルでパディングを1emに設定し、もう一方のファイルで2emに設定したことを覚えていない可能性があります。

于 2012-05-27T13:09:43.397 に答える