단일 그리드 또는 Flex를 사용하여 다양한 카드 레이아웃 만들기: 실용적인 가이드

Question

그림과 같이 반응형 카드 레이아웃을 만들어보려고 합니다.

현재 제가 하고 있는 일은 컴퓨터, 태블릿, 모바일 기기용 레이아웃을 별도로 제작하는 것입니다. 그럼 media 查询 的帮助下，我将其他两个视图的显示属性设置为 display: none .

예: 컴퓨터 보기에 있는 경우 컴퓨터의 카드 레이아웃은 표시를 "없음"으로 설정하지 않지만 다른 두 컴퓨터의 카드 레이아웃은 显示将为 none.

이 방법은 작동하지만 중복이 많이 발생합니다. Flex 또는 Grid를 사용하여 세 가지 레이아웃을 모두 구현하는 방법이 있습니다.

안내해 주세요.

Answer 1

화면 크기에 맞는 특정 디자인을 만들고 싶을 때마다 display: none 。 媒体查询带来了一个叫做断点的东西，您可以在其中指定屏幕的宽度（例如min-width: 768px）。对于移动屏幕尺寸，只需将 css 放在媒体查询下，并设置 max-width: 600px。此外，您可以使用 orientationlandscape 또는 portrait 모드를 구별하기 위해 속성을 설정할 필요가 없습니다.
쿼리 및 화면 크기에 대한 추가 정보

으아아아

MDN 지침

을 따르세요.

Answer 2

Flex를 사용하면 이 작업이 쉬워집니다.

화면 너비에 따라 아래와 같이 미디어 쿼리를 추가할 수 있으며 상자 너비와 최대 너비를 조정하여 상자 크기를 조정할 수 있습니다.

으아아아

확인하실 수 있습니다 https://jsfiddle.net/rx4hvn/wbqoLe0y/35/

도움이 되기를 바랍니다!