1

最小幅のメディア クエリとは、モバイルから上に設計し、デスクトップから下に最大幅のメディア クエリを設計していることを意味することを読みました。しかし、優れた設計手法を念頭に置いている場合、min-widthとメディア クエリの結果は基本的に同じではないでしょうか?max-width

2 つのうちの 1 つがベスト プラクティスとして推奨されていますか? また、その理由は何ですか?

4

2 に答える 2

2

モバイルとデスクトップのデザインに関して言えば、モバイル ファーストは、何が重要かを最初に考えるのに役立ちます。それはもちろんコンテンツです。物を取り除くのではなく、上向きに構築するように設計しています。

min-widthメディアクエリは、max-widthあなたが言ったように使用されます。考えてみると、かなり明白な理由があります。min-width要素を追加しているため、モバイルファーストに適しています。モバイルファーストでそれを行うには、より大きな画面にのみ表示される要素を指定する必要があります-より大きな画面をmin-width指定します.

したがって、あなたの質問への答えとして、それは異なります。多くの人がそうであるように、モバイル ファーストが現時点で最良の設計原則であることに同意する場合は、それmin-widthを選択する必要があるため、次の画面サイズにコンテンツを追加できます。逆もまた然り。どちらも最善の方法ではないと思うなら、世界はあなたのカキです.

于 2013-07-09T14:30:30.730 に答える
0

メディア クエリでは両方を使用できます。次に、最小値と最大値の範囲内にあるデバイスは、次の css を使用します。必要な数のメディア クエリを設定できます。

@media (min-width: 768px) and (max-width: 979px) {
  .hidden-desktop {
    display: none;
  }
}

上記の例では、クラス.hidden-desktopを持つすべてのアイテムがこれらのデバイスで非表示になります。これは、低解像度のデバイスでのみ表示したい機能です。

私は個人的に、単一の最小幅または最大幅を超える範囲を使用しています。非常に多くの異なるモバイル デバイスが存在するため、設計によって、設定する必要があるブレーク ポイントの数が決まると思います。私は通常 2 ～ 4 で終わります。1 つはハンドヘルド デバイス用、1 つはタブレット用、1 つはデスクトップ用です。設計によっては、27 インチなどの大型ディスプレイのクエリを追加することもあります。モニターなど...

于 2013-07-09T14:35:06.730 に答える