最近Webサイトを作成するときにCSSで@mediaをいくつ使用すべきですか
私は1つはiOS用、もう1つは大型電話用(Samsung)、1つは小型タブレット、1つは通常のタブレット、そして1つはラップトップ/デスクトップ用と考えています。
それはやり過ぎですか?
また、2回書くことを減らすために、それらすべてにmin-widthを使用するだけで済むでしょうか。
回答:
回答№1は6はい、あなたはただ使うことで逃げることができます min-width
または max-width
メディアクエリ - これはかなり一般的な方法です。
これは一種の意見に基づく質問であり、それゆえ完全にスタックオーバーフローの範囲にはありませんが、とにかく噛み付くでしょう。
メディアの数が少なければ少ないほど、IMOは優れています。デザインの流動的/自然な反応は、大量のメディアクエリを処理する必要がなくなります。私が構築するほとんどのサイトにはメディアクエリが1つしかありません。これは基本的にモバイルとタブレット/デスクトップの間の解像度です。 @media only screen and (max-width: 767px) { }
だからブレークポイントは768です。
制限が大きすぎると思われる場合は、追加できます。デスクトップの解像度は1024程度であるので、モバイルやタブレット/デスクトップではなく、モバイル/タブレット/デスクトップがあります。一般的に言えば、流動的なレイアウト手法を使用している場合は、1つのブレークポイントから1つのブレークポイントですぐにサイトを設計できるはずです。
これは即応型のベストプラクティスを促進する特定の画面サイズに合わせて最適化するにはあまりにも多くのデバイスがあるため、それらすべてに対応するサイトを設計することをお勧めします。考えられるすべてのディスプレイに対して1億のメディアクエリを送信する代わりに。