1

私はプロジェクトに取り組んでおり、レスポンシブ デザインを行ってメディア クエリを使用することはなくなりました。現在、Aaron Gustavson によるAdaptive Web Design 、Ben Frain による HTML5 と CSS3 を使用したレスポンシブ Web デザイン、およびその他のオンライン サイトを読んでいます。それは、私がどのように行ったのかまだちょっとわからないことの1つであり、それが選択した幅のメディアクエリです。

流れるようにするのではなく、所定の位置にスナップする twitter ブートストラップ スタイル (それを使用しない) を行うことにしました。

3タイプの
携帯・サイズは？
タブレット - 980px (横画面と縦
画面の両方 - 1160px )

私の質問は、それをカバーするためにどのメディアクエリを使用すればよいですか? これは私にとって最も難しい部分の 1 つです。

4

3 に答える 3

2

LESS フレームワークとTwitter Bootstrapはどちらも興味深いアプローチをとっています。

LESSframework は 4 つのモードを対象としています。

  • 大 - 992px w +
  • タブレット - 幅 768 ピクセル
  • モバイル 1 - 幅 480 ピクセル
  • モバイル 2 - 幅 320 ピクセル

Twitter Bootstrap は次の 5 つを対象としています。

  • 大 - 幅 1200 ピクセル +
  • 大 - 幅 980 ピクセル
  • タブレット - 幅 768 ピクセル
  • モバイル 1 - 幅 480～767 ピクセル
  • モバイル 2 - 幅 480 ピクセル未満

あなたがやろうとしていることを達成するために、これらの（または別の）レスポンシブ CSS フレームワークおよび/または LESS/SASS のいずれかを使用することをお勧めします。

于 2012-07-11T10:08:54.180 に答える
0

カスタム メディア クエリを使用できますが、標準のデバイス メディア クエリとして、次のリンクを参照してください。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

于 2012-07-11T09:46:50.313 に答える
0

メディア クエリに対して、デバイスに依存しないアプローチを採用します。

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

さまざまなビューポートを対象とし、レスポンシブ デザインを介してレイアウトを伸縮させてスペースを埋めます。

さまざまなビューポートを備えたデバイスが次々と市場に参入しています。特定のディメンションをターゲットにすることは負けゲームです。ビューポート範囲を使用したより一般的なアプローチは良い戦術です。

于 2012-07-11T13:40:31.903 に答える