デバイスの一般的なメディアクエリ

Question

電話機（肖像画と風景の両方）、タブレット（肖像画と風景の両方）、デスクトップに対応する一般的なCSSメディアクエリのリストを探しています。 いくつかの一般的なメディアクエリで多くの投稿を見つけましたが、それらはしばしば異なっていて、おそらく私はそれらを理解できません。例えば

、次のクエリ：

@media only screen and (max-width: 768px) { } 

それはすべての電話（縦と横）とタブレットの肖像画と一致していますか？または何？

私はまた、次のような他の例では、見つかった：

/* mobile */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } 
/* tablet */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } 

と

正しく電話（縦向きと横向きの両方）やタブレット（両方に一致する正しい以前のクエリの

/* mobile */ 
@media screen and (max-width:767px) { } 
/* tablet */ 
@media screen and (max-width:1024px) { } 

をポートレートと風景）？マルコスが言ったように、メディアクエリを使用する

Answer 1

最良の方法は、解像度を使用することです

感謝。最初のコード@media only screen and (max-width: 768px) { }は、最大画面解像度が768pxのすべてのデバイスをターゲットにします。携帯電話の解像度が640pxの場合はそれに影響します。携帯電話の解像度が768pxの場合は、{}で入力したコードは無視されます。通常はこれを使用してレスポンシブデザインを行い、さまざまなデバイスで異なる解像度のクエリを使用します（オンラインで最も一般的なクエリを簡単に見つけることができます）。

希望します。