メディアクエリについて調べてみたのですが、特定のサイズのデバイスをターゲットにする方法がまだよくわかりません。
デスクトップ、タブレット、モバイルをターゲットにできるようにしたいのです。多少の違いがあることは承知していますが、これらのデバイスをターゲットにできる一般的なシステムがあればいいと思います。
私が見つけた例をいくつか紹介します。
# 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 */ }
実際には、多くのデザイナーがピクセルをエムに変換していますが、これはエムの方がズームしやすいからです。標準的なズームでは 1em === 16px
です。ピクセルに 1em/16px
を掛けて ems とします。例えば、320px === 20em
となります。
コメントによると、min-width
はモバイルファーストデザインでは標準的なもので、最小のスクリーン用にデザインすることから始めて、だんだん大きくなるスクリーン用にメディアクエリを増やしていきます。min-、
max-`、またはそれらの組み合わせにかかわらず、ルールの順序に注意してください。複数のルールが同じ要素にマッチする場合、後のルールが前のルールを上書きすることを覚えておいてください。
デバイスを指定したい場合は、min-device-width
と記述します。例えば、以下のようになります。
@media only screen and (min-device-width: 480px){}
@media only screen and (min-device-width: 768px){}
良い記事がありましたのでご紹介します。
1.私はこのサイトを使って解像度を調べ、実際の数値に合わせてCSSを開発しました。 私の数値は上記の回答とはかなり異なりますが、私のCSSは実際に希望のデバイスにヒットしています。
2.2. また、メディアクエリの直後にデバッグ用のコードを記述してください。 例えば、以下のようになります。
@media only screen and (min-width: 769px) and (max-width: 1281px) {.
/* 10インチのタブレット画面の場合 */
ボディ::Before {
content: "tablet to some desktop media query (769 > 1281) fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9); /* 半透明の黄色 */*。
position: absolute;
トップ0;
左: 0
右: 0
z-index:99;
}
}
このデバッグ項目をすべてのメディアクエリに追加すると、どのようなクエリが適用されているかがわかります。