viewport 고정
width=device-width가 없으면 모바일이 데스크톱 폭을 축소 렌더링한다.
첫 조건유동 크기
width: 100%, max-width, minmax(0,1fr)로 부모 폭 안에서 줄어들게 만든다.
fixed px 최소화작은 화면 기본
1열, 짧은 간격, 줄바꿈 가능한 텍스트를 기본 스타일로 둔다.
mobile first넓은 화면 확장
min-width 조건에서 2~3열, 큰 간격, 보조 정보를 추가한다.
progressive enhancementfixed width
카드가 320px 화면 밖으로 튀어나감
width 대신 max-width와 flex/grid shrink 조건을 설정한다.
horizontal scroll 확인
long token
URL, 코드, 긴 영어가 부모를 밀어냄
overflow-wrap, min-width:0, code 줄바꿈 규칙을 함께 둔다.
텍스트 가드
image ratio
이미지가 찌그러지거나 높이를 밀어냄
max-width:100%, height:auto, aspect-ratio를 조합한다.
object-fit 점검
breakpoint gap
중간 폭에서만 레이아웃이 어색함
375, 768, 1024뿐 아니라 500~700px 구간도 확인한다.
tablet trap