web-dev-qa-db-ja.com

最大幅と最小幅

メディアクエリの使用について読んでいるチュートリアルのほとんどは、min-widthの使用方法を示していますが、max-widthを使用している人はほとんどいません。

これはある種のデザインの傾向、またはパターンであり、人々がmin-widthをmax-widthで使用しているのはなぜですか？

たとえば、私はモバイルから始めてデスクトップに至るまでサイトを設計しています。 Foundation 4を使用していますが、メディアクエリを使用して、ページ上のさまざまな要素を削除し、ソースの順序を変更します。

私が直面していることの1つは、幅が360ピクセル以下のデバイス用のカスタムナビゲーションです。インラインの水平方向ではなく、垂直方向のナビゲーションが必要です。したがって、私の考えは、max-widthを使用してこれらのデバイスをターゲットにすることでした。

最初にモバイルを設計する場合、代わりにmin-widthを使用する必要がありますか？つまりデフォルトのスタイルはすべてモバイル用であるため、min-widthを使用して徐々にレイアウトを強化しますか？

cssmedia-querieszurb-foundation
51
James Jeffery

スタイルシートがどのように機能するかによります。例えば：

@media screen and (min-width:100px) {
    body { font-weight:bold; }
}

@media screen and (min-width:200px) {
    body { color:#555; }
}

上記の2つのメディアクエリは、画面が100px以上の場合はbodyフォントを太字にしますが、also色が#555以上の場合は@media screen and (max-width:100px) { body { font-weight:bold; } } @media screen and (max-width:200px) { body { color:#555; } } にします200px;

もう一つの例：

#555

最初の例とは異なり、これにより、画面の幅が0〜100pxの場合にのみ、bodyフォントが太字になり、__ SOMECODE] _色になります。 0〜200ピクセルの場合、色は#555になります。

メディアクエリの利点は、次のステートメントを組み合わせることができることです。

@media screen and (min-width:100px) and (max-width:200px) {
    body { font-weight:bold; color:#555; }
}

この例では、幅が100〜200ピクセルのデバイスのみをターゲットにしています-それ以上でもそれ以下でもありません。

つまり、スタイルをleakからメディアクエリに変換する場合は、min-widthまたはmax-widthのいずれかを使用しますが、非常に特定の基準に影響を与えたい場合は、2つを組み合わせることができます。

74
James Donnelly

2部回答

パート1：「なぜ人々はmax-widthでmin-widthを使用しているのか？」に答えるには：

設計フローに関係しています。通常、最小幅のパターンでは、モバイルファーストを設計しています。最大幅のパターンを使用すると、デスクトップを最初に設計できます。

最小幅でモバイルファーストになると、デフォルトのスタイルはモバイルスタイルになります。その後のクエリは、徐々に大きな画面をターゲットにします。

body {
    /* default styles here, 
       targets mobile first */
}

@media screen and (min-width:480px) {
    /* style changes when the screen gets larger */
}

@media screen and (min-width:800px) {
        /* And even larger */
    }

逆に、max-widthを使用すると、デスクトップが最初になり、クエリを追加してスタイルをモバイルフレンドリーにします

body {
        /* default styles here, 
           targets desktops first */
    }

@media screen and (max-width:800px) {
    /* style changes when the screen gets smaller */
}

@media screen and (max-width:480px) {
        /* And even smaller */
    }

パート2：幅が360px以下のデバイスの特定のカスタムナビゲーションの場合：

ルールの唯一の例外である場合、個別の最大幅クエリとしてそれを含めることができます。 ORそのスタイルをベースラインとして使用し、より広い画面に合わせて変更します。

例外を実行する場合（実際にはモバイルファーストの設計方法ではありません）、次のようになります。

body {
        /* default styles here, 
           targets mobile first
           ALSO will cover 361 - 479 width */
    }

@media screen and (max-width:360px) {
    /* style ONLY for screens with 360px or less width */
}

@media screen and (min-width:480px) {
    /* style changes when the screen gets larger */
}
etc...
70
jpostdesign

つまり、最小幅はモバイルの最初のアプローチであり、最大幅はデスクトップの最初のアプローチです。

最小幅は、スタイルの適用が開始される最小の幅です。 （適切に機能するように、最小から最大に注文する必要があります。通常のスタイルが最初です）。別の言い方をすると、デバイスの幅が...以上の場合、特定のスタイルを適用します。 min-widthを使用すると、min-widthが満たされ、max-widthが指定されていない限り、スタイルが開始され、永遠に続きます。

最大幅は、スタイルが適用され続ける最大幅です。その後、スタイルは適用されなくなります。 （正常に動作するように、最大​​から最小に注文する必要があります。通常のスタイルが最初です）。言い換えると、デバイスの幅が...以下の場合、特定のスタイルを適用します。 max-widthを超える幅に達すると、スタイルはすぐに停止します。

最後に、実装方法によって異なります。一部の人が主張するように、正しい解決策はありません。私の意見では、ゼロ幅から始めるとmin-widthはうまく機能しますが、max-widthは既存のWebサイトを改良するときによく意味があります。

9
Heres2u

モバイルデザインから始めて解像度の複雑さを増すWebサイトを開発しているので、min-widthを使用することをお勧めします。これは同じ作業パターンに従うためです。

技術的には、min-widthは一般にモバイル向けの開発を開始し、解像度が上がるにつれて複雑さが増すという意味で「モバイル優先」です。

ただし、この用語は、モバイルの取り組みと優先順位付けに重点を置くことを意味するようになった代替の意味よりも人気が高まりました（主に、技術的な推論を理解していないクライアントまたは管理者によって促進されます）。そのため、min-widthの多くの例をオンラインで見ることになります（トレンディなブロガーがトレンディなトピックについて書いています）。

複雑なデスクトップデザインで作業するとき、個人的にはmax-widthクエリを記述して "方程式を単純化"する方が簡単だと感じています。ただし、max-widthクエリを使用しても、モバイルに集中することを妨げることはなく、完全に「モバイルファースト」戦略の一部になることができます。

どちらの場合でも、最も重要なことは一貫性です。使用して、そのプロジェクトに固執します。両方を使用すると、プロジェクトが非常に混乱する可能性があります。

最後に、できる限り少ないクエリを使用することが理想的です。これは、優れたレスポンシブデザインによって実現できます。

5
nickjag

デスクトップ用に設計された、最初に応答しないWebサイトがありました。次に、最大幅のメディアクエリを追加して応答性を追加しました。

私のサイトには現在、320px、480px、768px、960px、1024pxなどのワイドデバイス用のレイアウトがあるため、max-width: 479px、max-width: 767px、max-width: 959pxなどのようなメディアクエリを追加しました。これは正常に動作します-サイトは正常に動作します。

しかし、最近、Chrome Developer Tools "Device Mode"には、本当に便利なMedia Queries Toolがあることがわかりました。クリックすると、それぞれのWebサイトを表示できますメディアクエリレベルChrome=がページで見つかります。これは、レスポンシブレイアウトを設計する際に非常に役立ちます。

メディアクエリツールは、メディアクエリで見つかった番号（479、767、959、1023など）を使用します。ただし、これは、たとえば、480px幅のデバイスのレイアウトがどのように見えるかを確認したい場合、 max-width 767pxレベルのメディアクエリをクリックする必要がありますが、これは私にはまったく直感的ではありません。

これにより、現在のデスクトップファーストCSSを再考し、モバイルファーストアプローチを使用してCSSを書き直します。

min-widthのメディアクエリが表示され、それが480px幅のデバイスのCSSであることがわかるため、min-width: 480pxを使用するモバイルファーストCSSの方がはるかに読みやすいと思います。

2
David

私が取り組んでいるサイトの大半は、最初にデスクトップ用に設計されており、これらの場合はmax-widthクエリは理にかなっています。通常、最初に小さな画面を起動する場合は、min-widthその後、より大きな解像度をターゲットとするメディアクエリを使用して構築します。

もちろん、最小クエリと最大クエリの両方を組み合わせて、特定の解像度を取得できます

おそらくmin-device-widthナビゲーションで発生している特定の問題について

0
Duncan Beattie