Responsive decision

반응형 레이아웃은 콘텐츠가 먼저, CSS 도구가 다음

미디어 쿼리를 바로 쓰기보다 뷰포트, 콘텐츠 폭, 레이아웃 축, 상태 스타일 순서로 판단하면 작은 화면에서도 구조가 흔들리지 않는다.

반응형 도구 선택 순서

mobile first

모바일 브라우저가 실제 장치 폭 기준으로 레이아웃을 계산하게 만든다.

%, rem, minmax, flex-wrap으로 기본 흐름이 먼저 줄어들게 한다.

카드가 좁아지는 지점에서 열 수, 간격, 글자 크기를 단계적으로 바꾼다.

컴포넌트 상태와 함께 움직이는 반응형 스타일은 props와 가까이 둔다.

layout flow

viewport content grid query test