0

現時点では、レスポンシブ デザインに頭を悩ませようとしています。「モバイルファースト！」という言葉をよく耳にします。意味は理解できますが、どのように実践すればよいのかわかりません。

私は、いくつかのメディアクエリがすでに設定されている 320 以降のツールキット/ボイラープレートを使用しています: min-width: 480px, min-width: 600px, min-width: 768px, min-width: 992px& min-width: 1382px.
お気づきかもしれませんが、次のようなものmin-width: 320pxが欠けています。

これは、幅 320 ピクセルのメディア クエリの外側でページを設計し、メディア クエリを使用して調整が必要な特定のビットをオーバーライドするということですか?

4

1 に答える 1

2

これらのメディア クエリを使用せずに、最初に CSS を記述する必要があります。実際には、これらのメディア クエリを無視する必要があります。

「モバイル」CSS を配置したら (ブラウザ ウィンドウを非常に小さくします)、ブラウザ ウィンドウのサイズ変更を開始します。空白が多すぎる、行が長くなるなど、物事が奇妙に見え始めた瞬間に、その最小幅の新しいメディア クエリを追加します。

新しい Media Query 内で、奇妙に見えるものに合わせて調整し、それが完了したら、再びスケールアップを開始し、十分な画面領域がカバーされたと思われるポイントに到達するまでこれを続けます.

何千もの異なるデバイスが存在するため、デバイス幅は 1 つではなく、実際にデザインを実際に動作させる前にブレークポイントを決定することはできません。

于 2013-01-14T13:45:55.953 に答える