유연한 레이아웃·미디어·breakpoint를 함께 설계합니다.
반응형 디자인은 한 페이지가 다양한 화면에 적응하도록 fluid width, max-width, flex/grid, media query를 조합합니다. 단순히 요소를 숨기는 것이 아니라 우선순위와 작업 흐름을 유지해야 합니다.
이번 예제의 출발점은 width:min(100%,70rem); grid-template-columns:repeat(auto-fit,minmax(...));입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 minmax의 최소 폭을 100px과 220px로 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
데스크톱을 그대로 축소해 작은 글자와 작은 클릭 영역을 만들지 마세요.
직접 바꿔보세요minmax의 최소 폭을 100px과 220px로 비교하세요.