여기에서 몇 가지 질문을 조사했지만 제가 찾고 있는 문제를 완전히 해결하지는 못했습니다.
나에게 웹사이트가 있고 그것을 원한다고 가정해 보세요. 데스크탑에서 나는 이것을 원합니다:
쉽습니다. grid-template-columns: 重复(3, 33%) (기본적으로)
하지만 모바일에서는 이걸 원해요
내가 만난 일은 단일 열로 바뀌기 전에 일어났습니다.
나는 clamp()、minmax() 온갖 노력을 다하고 있지만 아무것도 내가 원하는 대로 되지 않습니다. 예, 확실히 미디어 쿼리를 사용할 수 있지만 기본 레이아웃 변경을 수행하는 데 미디어 쿼리가 필요하지 않도록 최신 CSS(예: 클램프, 그리드, minmax 등)를 사용하여 진정한 유동 그리드/플렉스 레이아웃을 만들고 싶습니다. < /p>
이것이 작동하지 않는다는 것을 알고 있지만 요청의 시작점으로 여기에 내 100번 시도 중 하나의 간단한 버전이 있습니다. :) 이 버전에서는 클램프를 사용하여 반복(3)에서 반복(1)으로 전환하려고 합니다. .
으아악 으아악
P粉0709187772023-12-24 11:12:44
더 일반적인 규칙이 포함된 전체 기사: https://css-tricks.com/반응성-layouts-fewer-media-queries/
이것은 flex-basis에서 사용됩니다 max(0px, (400px - 100vw)*1000) 的想法。如果 100vw（屏幕尺寸）大于 400px，则此公式将给出 0px，或者在相反情况下给出一个非常大的值，为每个元素提供一个big flex-basis 并创建一个包装。只需调整 400px 即可扮演 @media (max-width:400px)
CSS 그리드를 사용하면 다음과 같이 보일 수 있습니다:
미디어 쿼리 없이 최대 열 수를 제어하는 비슷한 질문: CSS 그리드 - 미디어 쿼리 없이 최대 열 수< /a>
위 솔루션을 확장하여 더 복잡한 사례를 고려할 수 있습니다.
6열에서 3열, 1열로 이동하는 예:
이러한 값을 이해하려면 다음 범위를 고려하세요.
으아아아6개의 열을 얻으려면 ]14.3% 16.7%] 范围内的值（我考虑的是 15%)
3개의 열을 얻으려면 ]25% 33.3%] 范围内的值（我考虑的是 30%)
우리는 간격을 고려하기 위해 가장자리를 피합니다.
CSS 변수를 사용하는 보다 일반적인 솔루션입니다. 여기에 0.1%를 추가하여 값이 원하는 열 수를 얻을 만큼 충분히 크고 간격을 수용할 수 있는지 확인합니다.
동적 색상도 추가합니다(관련: 높이 또는 너비에 따라 Flexbox를 사용하면 행의 마지막 항목이 사용 가능한 모든 공간을 차지하는 다른(원하는) 동작을 가질 수 있습니다.