브레이크포인트(breakpoint)는 반응형 디자인에서 배치 규칙이 달라지도록 정한 경계다. 미디어 쿼리로 한 단을 두 단으로 바꾸는 너비 조건이 그 예다.
- 작품 이미지와 설명을 나란히 놓았는데 설명이 몇 글자씩 끊어지면 나란히 놓을 공간이 충분한지 살핀다. 특정 기기 이름보다 실제 내용이 읽히는 조건에서 경계를 고를 수 있다.
@media (min-width: 42rem)은 뷰포트 너비가42rem이상일 때 적용할 규칙을 묶는다.42rem은 예시 값이며 모든 웹사이트에 맞는 기준은 아니다.- 같은 너비에서도 긴 제목이나 다른 언어를 넣으면 필요한 자리가 달라진다. 번역 뒤에 달라진 메뉴 폭은 화면 크기만 확인해서는 발견하기 어려운 조건이다.
- 유동형 레이아웃으로 자연스럽게 늘고 줄게 하면 경계를 여러 개 만들 필요가 줄어들 수 있다. 모든 폭을 별도 화면으로 그리기보다 규칙이 바뀌어야 할 지점을 고른다.