css - メディアクエリは「%」の使用とどう違うのですか?

Question

レスポンシブ レイアウトを作成するためにメディア クエリが使用されることは知っています。

ただし、それらは冗長に見えます。を使用して必要なすべてを達成することはできません%か?

Answer 1

ヘルプを使用してレイアウトを定義すると、レスポンシブ%レイアウトではなく、流動的なレイアウトが作成されます。

メディア クエリは、さまざまな画面サイズに対してさまざまなスタイル セットを定義するのに役立ちます。

また、メディア クエリを使用すると、高さと重量だけに制限する必要はなく、サイズ以外も制御できます。

以下の例は、画面サイズごとに異なる背景を作成します。

@media only screen and (min-width: 320px) {
   body { 
      background: red;
   }
}

@media only screen and (min-width: 780px) {
   body { 
      background: blue;
   }
}

それはでき%ますか？ いいえ

Answer 2

パーセンテージベースのレイアウトは流動的です。ビューポートのサイズが変化すると、コンポーネントの幅が変化する可能性があります。ただし、それで応答性が向上するわけではありません。

レスポンシブ レイアウトには、異なるビューポート サイズで異なる CSS が適用されます。たとえば、ビューポートが大きいときはそれぞれ幅が 50% で隣り合って浮いている 2 つのブロックは、ビューポートが小さいときは幅が 100% になり、互いに重なり合うように変更される場合があります。