9

まず、私はモバイル ファーストのレスポンシブ Web デザインの基本原則を理解しており、それに完全に同意しています。しかし、私が理解していないことが1つあります：

私の経験では、小さい画面用のすべてのスタイルを大きいバージョンの Web サイトに使用できるわけではありません。たとえば、通常、小さなバージョンでは、クリック可能な領域やハンバーガー ナビゲーションなどが大きくなる傾向があります。そのため、ベース スタイルを段階的に強化するだけでなく、これらの特定のスタイルをオーバーライドする必要がある場合もあります。

モバイル ファーストのレスポンシブ Web デザインのコンテキストで max-width がほとんど言及されていない (または使用されていない) のはなぜですか? min-width と一緒に使用して、大きな画面には役に立たない小さな画面のスタイルを分離できるように見えるため、コードの不要な重複を防ぐことができます。

max-width ではなく、通常はモバイル ファーストとして min-width に言及している引用:

それを念頭に置いて、どのメディア クエリが「モバイル ファースト」の方法論に最も適しているでしょうか? モバイル/小さな画面レイアウトを構築し、より大きなブラウザのスタイルを拡張したいと仮定すると、それは min-width になります。デバイスの幅が狭くなるにつれて、新しい CSS を適用します。しかし、それは「モバイル ファースト」のアプローチに反します。

から: http://petegale.com/blog/css-media-queries-min-width-vs-max-width/

編集:より具体的に言うと、モバイルファーストのレスポンシブデザインから max-width を除外する理由があるかどうか疑問に思っていました(一部のスタイルのように、css を可能な限り DRY として記述するのに役立つように思われるため)小さな画面は大きな画面には使用されません)。

4

3 に答える 3

2

max-width が言及されることはめったになく、ハンドヘルド デバイスのレスポンシブ デザインの開発によく使用されます。max-device-width をより頻繁に使用することを好みます。max-width をめったに使用しないという理解に一般化はありません。

ここで、さまざまなモバイルデバイスのさまざまなメディアクエリ (頻繁に使用される) を確認できます: http://nmsdvid.com/snippets/

iPhone の場合: http://www.stephentgilbert.com/mediaqueries/

私のデザインをより確実にするために、メディアタイプをハンドヘルドとしてより頻繁に使用しています。

よろしく

于 2013-10-20T08:20:31.450 に答える
2

モバイル ファーストのレスポンシブ デザインは、哲学、アイデア、目標です。その目標をどのように達成するかは、解釈の余地があります。

いずれかの手法を使用することは、複雑さと関係があります。最終的には、理解できる「システム」を使用したいと考えています。システムの設計で使用するパラメーターが多いほど、デバッグが難しくなります。

max-width クエリと min-width クエリの使用に実際の違いはありませんが、必要な考え方が明らかに異なることは別として。どちらか一方だけを使用することは、単にKISSの選択です ;)

誰もあなたに同じことを強要しているわけではありませんが、KISS することもお勧めします。

もちろん、必要な場合は追加しますが、多少の躊躇は決して悪いことではありません。時間をかけてオプションを評価し、何が複雑さのスケールを低く抑えているかを確認してください。通常は、それがより良いオプションです。

于 2013-10-22T10:33:52.267 に答える