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

Question

그림과 같은 반응형 카드 레이아웃을 만들려고 합니다. 제가 현재 하고 있는 일은 컴퓨터, 태블릿, 모바일 기기용으로 별도의 레이아웃을 만드는 것입니다. 그런 다음 미디어 쿼리를 사용하여 다른 두 보기의 표시 속성을 display:none으로 설정했습니다. 예: 컴퓨터 보기에 있는 경우 컴퓨터의 카드 레이아웃에는 디스플레이가 "없음"으로 설정되지 않지만 다른 두 컴퓨터의 디스플레이는 없음으로 설정됩니다. 이는 효과가 있지만 중복이 많이 발생합니다. Flex 또는 Grid를 사용하여 세 가지 레이아웃을 모두 구현하는 방법이 있습니다. 안내해주세요.

P粉706038741 · Answer

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

으아아아

MDN 지침

을 따르세요.

P粉204136428 · Answer

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

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

으아아아

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

도움이 되기를 바랍니다!