電話機(肖像画と風景の両方)、タブレット(肖像画と風景の両方)、デスクトップに対応する一般的な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) { }
をポートレートと風景)?マルコスが言ったように、メディアクエリを使用する
ファーストコードとラストコードは、max-widthプロパティに適合するデバイスやデスクトップで動作します。モバイルであるかどうかは関係ありません。 2番目の例は、2つの解像度間のデバイスでのみ機能しますが、解像度と一致してもデスクトップでは機能しません。私は、より良い選択肢は、デバイスではなく常に目標解像度であると思います。このモードでは、レスポンシブなウェブデザインを作成しています。解決策の代わりにデバイスをターゲティングすると、それは反応しませんが、それはモバイル版です。 –
オリエンテーションについて心配している場合は、「オリエンテーション」機能を試してみることができます。ここに[w3 docs](https://www.w3.org/TR/mediaqueries-4/#orientation)があります。 –