0

メディアクエリについてはたくさんのトピックがあることは知っていますが、今夜はこれに行き詰まっています：

私はこれで多くのスマートフォン、特にSamsung Galaxy S3をターゲットにしています:

@media screen and (max-device-width: 720px), (min-device-width: 721px) { .. }

ポートレートとランドスケープの両方でうまく機能します！しかし、理由はわかりません。このようにして、私は望んでいないIpad の横向きモードもターゲットにしています。スマートフォンと一緒に iPad の縦表示をターゲットにしたい場合に備えて! 明確にするために、私が達成したいのは、ウェブサイトの2つのバージョンを持つことです。デフォルトは最大幅960pxのレイアウトで、小さいバージョンはスマートフォンに非常に適し、縦向きのiPadやその他のタブレットに適しています。モバイル版はスマートフォンでは動作しますが、iPad ではほとんど動作しません...

Ipad を直接ターゲットにできることはわかっていますが、デスクトップと同じように多くの CSS ルールを複製したくありません。

4

1 に答える 1

0

問題は、メディアクエリの構文にあるようです。代わりにコンマを使用しましたがand、間違った方法で最大/最小が使用されていると思います。CSSメディアクエリの場合、a,はORセパレータですが、AND複数のクエリがtrueである必要があります。

代わりに、メディアクエリは次のようになります。

@media screen and (min-device-width: 720px) and (max-device-width: 721px) { .. }

device-widthまたは、より簡潔に書くと、特定の：を使用できます。

@media screen and (device-width: 720px) { .. }

この方法を使用すると、カンマを使用してGalaxyS3のポートレートとランドスケープをターゲットにできます。

@media screen and (device-width: 720px), (device-width: 1280px) { .. }

于 2013-01-14T03:49:01.997 に答える