メディア クエリについて調査してきましたが、特定のサイズのデバイスをターゲットにする方法がまだよくわかりません。
デスクトップ、タブレット、モバイルをターゲットにできるようにしたいと考えています。多少の差異があることは承知していますが、これらのデバイスをターゲットにできる汎用システムがあれば便利です。
私が見つけたいくつかの例:
# 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)
各デバイスのブレークポイントはどうすればよいですか?
ベストアンサー1
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ためです。標準ズーム では、ピクセルに を掛けて を取得します。たとえば、 です。em1em === 16px1em/16pxem320px === 20em
コメントへの返答として、min-widthこれは「モバイルファースト」デザインの標準であり、最小の画面向けに設計することから始めて、メディアクエリを増やし続け、徐々に大きな画面に進んでいきます。
min-、 、またはそれらの組み合わせのいずれを好むかに関係なくmax-、ルールの順序に注意してください。複数のルールが同じ要素に一致する場合は、後のルールが前のルールを上書きすることに注意してください。