하나의 웹사이트, 다양한 화면. 반응형 디자인은 단일 레이아웃을 다양한 기기 크기와 방향에 맞춰 자동으로 조정합니다. 이 용어는 2010년 에단 마르코트가 유연한 그리드와 유동적인 이미지에 대한 기존 아이디어를 바탕으로 만들어냈습니다. 데스크톱용과 모바일용 웹사이트를 따로 구축하는 대신, 디자이너는 화면 너비에 따라 레이아웃이 자동으로 조정되는 하나의 코드베이스를 만듭니다.

세 가지 기술적 요소가 이를 가능하게 합니다. 유동적인 그리드는 고정된 픽셀 대신 백분율을 사용하므로 열이 늘어나거나 줄어듭니다. 유연한 이미지는 컨테이너 내에서 크기가 조정됩니다. 미디어 쿼리는 화면 크기를 감지하고 정의된 브레이크포인트에서 다른 CSS 규칙을 적용합니다. 데스크톱의 3단 레이아웃이 휴대폰에서는 1단 레이아웃으로 축소되고 탐색 메뉴가 햄버거 메뉴로 이동할 수 있습니다. 목표는 픽셀 단위로 정확하게 제어하는 ​​것이 아니라 화면에 자연스럽게 적응하는 것입니다.

핵심 기술

• 백분율 기반의 유동적인 격자.
• 유연한 이미지 및 미디어.
• 정의된 브레이크포인트에서의 미디어 쿼리.
• 모바일 우선 콘텐츠 우선순위 지정.

반응형 디자인은 이제 표준 관행이 되었습니다. 사용자들은 휴대전화, 태블릿, 노트북, TV 등 어떤 기기에서 사이트를 열더라도 제대로 작동하기를 기대합니다.