width=device-width 설정이 있어야 CSS 픽셀과 기기 폭이 예상대로 맞습니다.
responsive checklist
반응형 디자인은 viewport, media query, 유연한 레이아웃을 함께 본다
모바일에서 글자가 숨거나 카드가 넘치지 않게 meta viewport, Flexbox, CSS Grid, breakpoints를 같은 흐름으로 점검합니다.
flex-wrap, grid-template-columns, minmax를 이용해 카드가 자연스럽게 줄바꿈됩니다.
화면 폭만 보지 말고 콘텐츠가 깨지는 지점을 기준으로 media query를 둡니다.
가장 좁은 화면에서 버튼과 텍스트가 겹치지 않습니다.
중간 폭에서 열 수와 간격이 어색하게 비지 않습니다.
너무 긴 줄은 max-width로 읽기 폭을 제한합니다.
확대와 키보드 포커스에서도 레이아웃이 유지됩니다.