レスポンシブWebサイトを開発するためのヒント
レスポンシブWebサイトを設計するときに、適切なワークフローを見つけようとすると問題が発生します。
私はいくつかのアプローチを試しましたが、最近は次のようにしています：
- すべてのhtmlおよびcssは、最大化されたウィンドウ（約1400ピクセル幅）で動作しますか
- 次に、レイアウトを縮小して
@media screen and (min-width: 600px)を挿入します。たとえば、レイアウトがおかしくなったら、それを修正します - もう少し収縮してから元に戻します。
@media screen and (min-width: 400px)など...
HTMLでは、<meta name="viewport" content="width=device-width, initial-scale=1">を使用します。これは、HTML5Boilerplateに由来することです。
大きなウィンドウから小さなウィンドウまで、そのように逆方向に作業すると、すべてがうまく機能しているように見え、最終的にサイトのモバイルバージョンが適切になります。
いいですねいいえ。問題は、再び最大化すると、いくつかのものが台無しになり、それらを修正するのが信じられないほど難しいになることです。イライラするように、時間がかかる...
私はこの痛みを伴うプロセスを両方向（大から小、およびその逆）で試しました。
vwユニットの使用は大いに役立ちました（今ではどこにでも配置できます）が、少なくとも私にとってはまだ悪夢のようなものです。
私はMacawまたはReflowのようなプログラムも試しましたが、私は最終的には手作業でレタッチ/最適化を行わなければならないので、あまり快適ではありません。
私は何か間違ったことをしているに違いない。それは何ですか？これを行うための最良/最も簡単な方法は何ですか？代わりにmax-widthを使用する方が良いでしょうか？
私が知らない明らかなワークフローがなければなりません。
Respnsive設計のコーディングが非常に難しい理由について、誰からも具体的なアドバイスが得られるとは思いませんが、通常は2つのアプローチがあります。 A.可能な限り最小の画面用に設計し、上に向かって（モバイル最初）作業を行うか、b可能な限り最大の画面から始めて下に向かって作業します。あなたは物事に非常に精通することができ、どのディビジョンを表示/非表示にするか、またはレスポンシブデザインに基づいてスタイルを変更するかについてのユーザーの好みの問題です。レスポンシブデザインを長年取り扱った後、私はどのようにアプローチするかを説明します。
- 私は常に可能な限り最大の画面で最初にモニター用に設計します。私のブレークポイントは次のとおりです。
- 2560を超える幅（その後、サイトを2560にレターボックス化するだけです）
- 1921-2560-巨大な画面（映画のディスプレイ）
- 1441-1920-HDスクリーン
- 1100-1440-Macbook Airs
- タブレット（デバイスの向きのポートレート）モダナイザータッチ対応
- タブレット（デバイスの向きのランドスケープ）モダナイザータッチ対応
- 携帯電話（デバイスの向きのポートレート）モダナイザータッチ対応
- 携帯電話（デバイスの向きのランドスケープ）モダナイザータッチ（divをオーバーレイし、デバイスをオンにするように指示します。ランドスケープフォンは設計が不可能なためです）。
繰り返しますが、それはすべて、プロジェクトで機能するもの、持っているブレークポイントの数に依存します。 Twitterブートストラップのようなものを使用している場合、それらには素敵な開始点を与える素敵なブレークポイントセット（2560ほどではありません）があります（大量の未使用のcssクラスで支払いたい場合）。 。