5

Web サイトのスマートフォン フレンドリー バージョンを開発していますが、スマートフォンの横向きのメディア クエリを使用しているときに少し問題に直面しています。縦向きの場合、次のメディア クエリを使用していますが、問題なく動作しています。

@media only screen and (max-width : 320px) {ここにスタイルが入ります}

しかし、このメディア クエリを横向き (css-tricks.com から取得) に使用すると、横向き用に記述したスタイルが、Web サイトのデスクトップ バージョン用に入力したスタイルを上書きします。

@media only screen and (min-width : 321px) {ここにスタイルが入ります}

これは、横向きのスタイルを挿入している場合にのみ発生します。縦向きのスタイルを割り当てた場合は発生しません。

PS私はiPhone 4でテストを行っています。

4

1 に答える 1

9

横向きの最大幅を設定する必要があります。これにより、幅が 800px 未満になるまでデスクトップ スタイルが上書きされません。

@media only screen and (min-width : 321px) and (max-width: 800px) { style goes here }

もう 1 つの可能性は、デスクトップ スタイルを別のクエリにラップし、ポートレート スタイルとランドスケープ スタイルの下にコピーすることです。

/* PORTRAIT STYLES */
@media only screen and (max-width : 320px) { style goes here }
/* LANDSCAPE STYLES */
@media only screen and (min-width : 321px) { style goes here }
/* DESKTOP STYLES */
@media only screen and (min-width : 800px) { style goes here }

Desktop バージョンでは、Landscape スタイルが使用されることに注意してください。時々、これは歓迎すべき振る舞いです。

于 2013-04-11T16:00:56.110 に答える