@media クエリを使用して、4 つの異なるレイアウトを持つ素敵なテンプレートを作成しました。
850+px 幅
<850px 幅
iphone 横向き
iphone 縦 向き
モニター ウィンドウのサイズを 480px 未満 (iPhone の横長) に縮小するまでは、うまく機能します。その後、より小さいサイズの @media クエリを取得し始めます。
これを回避する方法はありますか？
質問する
114 次
1 に答える
1
個人的には、「iPhone」レイアウトをより小さなブラウザー ウィンドウ サイズで表示することが望ましいと感じています。コンテンツがそのレイアウト用に最適化されている可能性が高いためdevice-widthです@media。@media only screen and (max-device-width: 720px) { ... }ビューポートの幅ではなく、デバイスの幅をターゲットにするようなものです。これ(ビューポート幅) とこれ(デバイス幅)の動作を比較してください。値をいじって ( に変更minするmax、ピクセル サイズを変更するなど)、動作を観察します。@mediaまた、ルールを組み合わせることができることも忘れないでください@media (min-width: 400px) and (max-width: 600px) { ... }。あなたに合ったものをご覧ください。
この方法の問題点は、モバイル デバイスにはさまざまな形状とサイズがあるため、計画していなかった別のモバイル デバイス (Android フォンとしましょう...) で望ましくないスタイルを提供する可能性があることです。ただし、ニーズによっては、これは問題にならない場合があります。
このルートに進むことにした場合のガイドとなる、メディア クエリとサイズの例のリストを次に示しますhttp://css-tricks.com/snippets/css/media-queries-for-standard-devices/。 .
于 2012-08-29T18:57:32.757 に答える