3

現在、レスポンシブページを作成していますが、問題があります。
画面サイズを大きくするには、見出しなどを拡大したいと思います。これは機能しますが、iPhoneのページを横向きモードでテストすると、見出しが大きすぎます。

縦向きのiPhoneが大画面のメディアクエリをトリガーするのはなぜですか？見出しを拡大するCSSルールは、このメディアクエリに含まれています。

@media only screen and (min-width: 30em) {
    /* 480 pixel */
}

横向きのiPhone画面の幅は480ピクセルです。だから私はこのようにそれをやろうとしました：

@media only screen and (min-width: 30em) not (orientation: landscape) {
        /* 480 pixel* /
}

これでiPhoneで動作しますが、MacBookでは見出しが拡大されなくなりました。おそらくそれはある種の論理的なエラーですが、どこが間違っているのでしょうか？

4

1 に答える 1

3

に置き換えnot (orientation:landscape)てみてくださいand (orientation:portrait)。失敗した場合は、em値をpx値に変更してみてください。一部のブラウザーはまだうまく機能しないemため、試してみる価値があります。

編集: 別々のスタイルに分割しないのはなぜですか?

@media all and (min-width:480px) and (orientation:landscape) {
    // styles for desktops, mouse-friendly interface
}

@media all and (min-width:480px) and (orientation:portrait) {
    // styles for mobiles, touch-friendly interface
}
于 2013-03-03T16:44:25.933 に答える