13장. 반응형 설계와 Media Query

반응형은 device 이름을 맞추는 일이 아니다. 콘텐츠가 깨지는 폭을 기준으로 breakpoint를 정한다. mobile-first min-width 또는 desktop-first max-width 중 하나를 팀 기본으로 선택하고 예외 이유를 남긴다.

viewport뿐 아니라 prefers-reduced-motion, prefers-contrast, forced-colors, hover, pointer, orientation, print를 다룬다. hover 가능 여부와 화면 폭을 같은 것으로 가정하지 않는다.

StudioBoard는 48rem 아래에서 sidebar를 위로 보내고 nav를 감춘다. nav를 숨긴 뒤 대체 메뉴가 없다면 기능 손실이다. 실습은 화면 캡처용 간소화이므로 실제 제품에서는 menu button과 상태를 추가한다.