標準のCSSの代わりにメディアクエリ

Question

本当に私はこの質問をする方法を知りませんでした。しかし、私はレスポンシブルサイトを行う必要がある場合はなぜHTMLと私は一度にメディアのクエリの適切な範囲で必要なスタイルを書くことができますか？

Answer 1

あなたの質問はそれほど明確ではありませんが、メディアクエリの中にすべてのCSSを書き込むのではなく、

"normal" cssは、すべてのビューポート範囲（大小）に適用されるデフォルトです。メディア照会は、さまざまな幅に必要なデフォルト値を変更または上書きするために使用されます。

デフォルトのCSSを使用しない場合は、さまざまなメディアクエリのすべてで、同じCSSプロパティを繰り返し複製する可能性が高くなります。これはあなたのCSSが肥大化し、維持するのが難しくなります。フォントや背景色、フォントファミリなどのものは、すべてベースのCSSで1か所に定義されています。色やフォントを変更することに決めた場合、多くの不必要な冗長性を引き起こすだけでなく、さまざまなメディアクエリでそれらを何度も繰り返す必要がある場合は、1つではなく多くの場所で変更する必要があります。

「モバイルファースト」のデザインでは、一般的に、モバイルサイトでのサイトの見た目を反映させたベーススタイルを作成し、メディアクエリを追加して、サイズの大きいデバイスのレイアウトを変更します。これは、メディアクエリを使用して最小のデバイスである をターゲティングしていないとは限りませんが、ベースのcssからターゲットモバイルに移行することがベストプラクティスと見なされます。

また、すべてのベースcssを（サイト全体のために）書き、次にメディアクエリを書き込む必要はありません。しかし、要素または要素のセットのためにベースのCSSを記述してから、必要に応じてメディアクエリを使ってそれを変更する必要があります。