2

いくつかのメディアクエリを拡張しようとして立ち往生しています。

次のような最大幅ベースのクエリと最小幅ベースのクエリが 1 つあります。

@media only screen and (max-width: 600px) {
/* styling goes here */
}

@media only screen and (min-width: 600px) {
/* styling goes here */
}

最初のクエリを拡張して、それ自体が縦向きであると認識するデバイスでも有効にし、同様に縦向きモードではないデバイスを使用しているときにトリガーするように 2 番目のクエリを拡張したいと思います。

2 番目のメディア クエリ (最小幅ベース) は、デバイスの幅に関係なく、ポートレート モードでは適用されません。

4

2 に答える 2

1

あなたが探しているのはAND演算子ではなくOR、CSS の世界では単なるコンマである演算子を探していると思います。したがって、次のようなことができます。

@media only screen and (max-width: 600px),
screen and (orientation:portrait) {
     /* styling goes here */
}

ただし、希望する結果を得るには、クエリの順序を逆にして、正しくカスケードできるようにする必要があります。これは、たとえば iPad では、縦向きであっても がmin-width: 600pxあり、2 つのステートメントのいずれかが true と評価され、メディア クエリがトリガーされるためです。

メディア クエリをportraitメディア クエリの下に配置することで、クエリが評価されたときに以前のスタイリングが上書きされることlandscapeを実際に確認できます。orientationTRUE

ここで、JSBin の変更された作業バージョンを確認できます。

Working example

iPadで試してみてください。縦向きモードでは 600px を超えますが、それでも表示されます: small-screen .

于 2013-04-19T12:05:48.227 に答える