1

Web には、レスポンシブ デザインに関する記事や、css メディア クエリを使用して目標を達成する方法に関する記事が多数あります。ただし、それらの大部分は、レスポンシブ デザインが普及し始めた 2011 年に作成されたようです。

2011 年以降、多種多様なデバイス幅とさまざまな ppi を備えたさまざまなデバイスが市場にリリースされ、2011 年のメディア クエリは必ずしもカバーするわけではありません。ほとんどの場合、Galaxy Note I/II や 7 インチ タブレット、さらには Retina ディスプレイなどの高 ppi デバイスなどの大判モバイル デバイスを指しています。

ほとんどのデバイスを適切にカバーするためのベスト プラクティス アプローチで使用される最新の css メディア クエリ コードを維持するリソースはありますか?

4

3 に答える 3

4

レスポンシブ デザインは「メディア クエリ」だけではありません。レスポンシブ デザインは、開発者とデザイナーがあらゆる方法でアクセシビリティを採用することを奨励します。

Twitter にアクセスして (すべての会話が行われる場所であるため)、すぐにアカウントを作成して、これらの素晴らしい人々をフォローすることを強くお勧めします: @beep の後に順不同:

  • @beep -レスポンシブ デザインを普及させた Ethan Marcotte 氏。
  • @RWD - Ethan Marcotte のアカウントで、レスポンシブ Web デザインに関連するものについてツイートしています。
  • @lukew - ルーク・ウロブレフスキー。
  • @brad_frost -ブラッド・フロスト。
  • @Trentwalton -トレント・ウォルトン。
  • @adactio -ジェレミー・キース。
  • @scottjhel -レスポンシブ画像用のポリフィルである Picturefill の作成者であるScott Jhelや、その他のクールなもの。
  • @wilto - マット・マーキス。
  • @smashingmag - スマッシングマガジン。
  • @grigs -ジェイソン・グリグスビー。
  • @globalmoxie -ジョシュ・クラーク。
  • @chriscoyier - Chris Coyier、すべての CSS..
  • @malarkey -アンディ・クラーク。
  • @jordanmoore -ジョーダン・ムーア。
  • @viljamis -ヴィルジャミ・サルミネン。

    私が除外した人が何人かいるかもしれませんが、これは始めるのに適した場所です! いつでも、レスポンシブ デザインに関連する良い会話やリンク、記事に出くわすことでしょう。

    また、レスポンシブ Web デザインについてほぼ毎日 Web サイトに書いているので、こちらもぜひチェックしてください。そこには、読むべきものがたくさんあります。

    いくつかの良い読み物:
    コンテンツ
    の条件付き読み込み レスポンシブ デザインの条件付き読み込み
    モバイル ファーストのレスポンシブ Web デザイン
    の作成 EM はそれを持っています: プロポーショナル メディア クエリ FTW! - 推奨読書。
    This is Responsive - Brad Frost によってキュレーションされた、Web 中から収集されたレスポンシブ Web デザインに関するリンクともののまとめ。

    発行日に関しては、それらは関係ありません。コンテンツが廃止されたり、メソッドが減価償却されたりした場合、作成者はおそらくそれを削除するか、それに応じてマークを付けます。

    編集: ウェブサイトをテストするためのいくつかの優れたツール:
    Responsive.is - さまざまな画面サイズでデザインがどのように機能するかをテストします。
    Respondpx.com - 画面の幅を「px」に入力することで、デザインがどこで壊れているかを正確に把握できます。
    pxtoem - ピクセル単位を ems に変換.
    Izilla Media Query Debugger - このプラグインはブラウザ ウィンドウのサイズを表示します (responsivepx.com に似ていますが、ローカルで動作します)。
    Opera Mobile Emulator - Opera Mobile でウェブサイトをテストします。
    Opera Mini Simulatr - Opera Mini で Web サイトをテストします (ローエンド デバイス用)。

    一般的な画面サイズ用に設計しないでください。デザインが壊れたら、ブレークポイント (メディア クエリ) を挿入します。関連: http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid

    • 于 2012-09-20T20:38:12.747 に答える
    1

    私が知っているメディアクエリのライブラリはありません。その理由は次のとおりです。

    レスポンシブ デザインのベスト プラクティス アプローチは、デザインに必要になったときにメディア クエリを使用することです。適切なレスポンシブ サイトは、ユーザーの画面サイズに基づいてサイズを変更する必要があり、UX の調整が必要な場合にのみ、メディア クエリを使用する必要があります。

    デザインのブレークポイントを見つけるには、ページが読みにくくなるか、クリッピングが発生するか、その他の UI/UX の問題が明らかになるまで、ブラウザーのサイズを変更します。画面のサイズに注意し、そのブレークポイントに必要な調整を行います。

    読書: http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design

    このアプローチを使用したくない場合は、ベスト プラクティスのソースとしてフレームワークを検討できます。私が好きでよく使うのは Foundation http://foundation.zurb.comで、Bootstrap http://twitter.github.com/bootstrap/のようなものもあります。

    これらは優れたツールですが、最終的には設計に適したブレークポイントを見つけ出すことができます。Foundation は、プロジェクトを開始するための優れた出発点です。

    参考文献：

    于 2012-09-20T18:14:36.850 に答える
    -1

    Twitter からの Bootstrap は、おそらく良い出発点です。

    http://twitter.github.com/bootstrap/

    于 2012-09-20T20:34:45.780 に答える