[解決済み] メディアクエリ。デスクトップ、タブレット、モバイルをターゲットにする方法とは？

質問

メディアクエリについて調べているのですが、特定のサイズのデバイスをターゲットにする方法がまだよくわかりません。

デスクトップ、タブレット、モバイルをターゲットにできるようにしたいのですが。多少のズレはあるかと思いますが、これらのデバイスをターゲットにできる汎用的なシステムがあればいいなと思います。

私が見つけたいくつかの例。

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

または

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

各デバイスのブレークポイントはどのように設定すればよいのでしょうか？

どのように解決するのですか？

IMOのベストブレークポイントはこれです。

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

編集 : 960グリッドでより良く動作するようにリファインしました。

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

実際には、多くのデザイナーは、ピクセルを em であり、その主な理由は em の方が、より良いズームが可能です。標準ズームでは 1em === 16px をピクセルに乗算します。 1em/16px を取得します。 em s. 例えば 320px === 20em .

コメントを受けて min-width モバイルファーストデザインでは、まず小さな画面向けにデザインし、メディアクエリをどんどん追加して、より大きな画面向けにデザインしていきます。

を好むかどうかにかかわらず min- , max- 複数のルールが同じ要素にマッチした場合、後のルールが前のルールを上書きすることを念頭に置いて、ルールの順序を認識してください。