5

どのくらいのメディアクエリを使用することをお勧めしますか?

私は4つのデザインを作りました：

横向きモード (iPad などのデスクトップ) の場合は 960、縦向きモード (iPad) の場合は 768、縦向きモード (iPhone) の場合は 340、および 960 を超えるすべての場合

今私の質問：

1) まず、なぜ 1024 ではなく 960 を使用したのかさえわかりません。スクロールバーの幅を 960 に縮小する必要があるため、少し前に何かを読みました。タブレットとスマートフォンに関してはどうですか?

2) これらの幅を選択したのは、誰かがランドスケープ モードを使用すると、「ipad-media-query」に切り替わり、「iphone-media-query」に戻ると考えたからです。しかし、それは私の理論です。私はメディアクエリが初めてです。それが私が尋ねる理由です。ウェブサイトに最適な量のメディアクエリをカバーするための助けや提案されたCSSコードの例に感謝します!?

3) 最適なメディア クエリ サイズの影響を受けるほとんどのタブレット、スマートフォン、デスクトップなどをカバーしたいだけです。あなたの「最善の解決策」に本当に感謝します！

4

6 に答える 6

6

ひもの長さはどれくらいですか?

使用するのに適したメディア クエリの数とその実装方法は、実際にはあなたとあなたの設計次第です。

ガイドとして、Twitter Bootstrap がメディア クエリを実装する方法を確認することをお勧めします。彼らはその数字にたどり着くために多くの調査を行ってきたので、それは良い出発点になるでしょう.

http://twitter.github.com/bootstrap/scaffolding.html#responsive

于 2013-03-12T13:38:46.620 に答える
2

ブレークポイントを識別しようとするのは悪い考えです。レスポンシブ Web サイトにブレークポイントを設ける主な理由は、エクスペリエンスを最適に保つことです。新しいデバイスや解像度ごとに新しいメディア クエリを導入する必要はありません。

于 2013-06-21T13:55:47.463 に答える
1

メディア クエリの使用: 240 x 320 (モバイル)、320 x 480 (モバイル)、480 x 640 (小型タブレット)、768 x 1024 (タブレット - 縦向き)、1024 x 768 (タブレット - 横向き)

320 ピクセル未満の幅を考慮することは非常に良い方法ですが、すべての訪問者に重点を置いている人にとっては.

于 2013-05-19T16:26:14.923 に答える
0

最新のデザインの世界では、レスポンシブ デザインが求められています。

この例を参照して、必要なすべてのメディア クエリを使用してください: http://nmsdvid.com/snippets/

于 2013-03-12T13:50:56.750 に答える
0

メディアクエリを必要としない動的レイアウトを使用します。

メディアクエリを使用して要素を非表示/移動するだけです。

それらはいくつでも使用できます。現在のブラウザーの幅を表示する JavaScript をページに配置し、ブラウザーのサイズを変更して要素を非表示にするタイミングをテストするだけです。私のために働く

于 2013-03-12T13:34:26.313 に答える