5

私は自分のサイトに次のメディアクエリを使用しています

        @media (max-width: 976px) {}

私は自分のサイトを見るとそれを見つけています

   http://46.32.253.11/

横向きモードのiPad3では、縦向きモードで表示されるナビゲーションバーボタンが機能せず、ナビゲーションバーが2行に分割されています。

別のメディアクエリを追加する必要がありますか、それとも既存のメディアクエリを編集できますか？もしそうなら、私はどのような変更を加える必要がありますか。

私はメディアクエリに本当に慣れていないので、誰かが優れたリソースを持っていれば、それを共有したいと思います。

4

1 に答える 1

27

標準のデバイス解像度のブートストラップがあるこのcss-tricksの記事をご覧ください：http：//css-tricks.com/snippets/css/media-queries-for-standard-devices/

以下にリストされている特定のメディアクエリがlandscapeありportraitます。

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
}

ただし、「モバイルファースト」のアプローチからは、デバイス用に設計するのではなく、設計に適した解像度のブレークポイント用に設計する必要があることを強調したいと思います。320 x 480などの非常に小さい解像度から始めてみてください。そこから、そのデザインが「壊れて」（つまり、がらくたのように見える）までブラウザの幅を広げてから、その解像度でブレークポイントを追加します。ブラウザの幅を確認する便利な方法は、Chrome（またはFirefoxの場合はFirebug）で開発者コンソールを開き、入力しdocument.body.offsetWidthてEnterキーを押すことです。ブラウザの幅のピクセル量が表示されます。さまざまなデバイスで必要なエクスペリエンスが得られるまで、追加/再配置を続けます。

ウェブは前進しています。つまり、テレビやプロジェクターに至るまで、スマートフォンについて考える必要があります。それを念頭に置いてサイトを設計してください。

これがお役に立てば幸いです。

于 2012-07-19T13:57:12.870 に答える