単一のグリッドまたは Flex を使用して多様なカード レイアウトを作成する: 実用的なガイド

Question

写真に示すように、レスポンシブなカード レイアウトを作成しようとしています。

現在私が行っているのは、コンピューター、タブレット、モバイル デバイス用に個別のレイアウトを作成することです。次に、 media query を使用して、他の 2 つのビューの表示プロパティを display: none に設定します。

例: [コンピュータ] ビューにいる場合、コンピュータのカード レイアウトでは表示が「なし」に設定されていませんが、他の 2 台のコンピュータの 表示はなしになります。

これは機能しますが、多くの冗長性が生じます。 Flex または Grid を使用して 3 つのレイアウトすべてを実現する方法があります。

私を導いてください。

Answer 1

画面サイズに合わせて特定のデザインが必要な場合、毎回 display:none を設定する必要はありません。 Media queries は、画面の幅を指定できる breakpoints と呼ばれるものをもたらします (例: min-width: 768px)。モバイル画面サイズの場合は、media queries の下に CSS を配置し、max-width: 600px を設定します。さらに、orientation 属性を使用して、landscape モードと portrait モードを区別することができます。
クエリと画面サイズの詳細

リーリー

MDN ガイドライン に従ってください。

Answer 2

Flex を使用するとこれが簡単になります。

画面の幅に応じて、以下に示すようにメディア クエリを追加し、ボックスの幅と最大幅を調整してボックスのサイズを変更できます。

リーリー

ご覧いただけますhttps://jsfiddle.net/rx4hvn/wbqoLe0y/35/

＃＃＃お役に立てれば！