프런트 엔드 초보자인 자신이 웹페이지를 HTML과 CSS로 구현할 때 '응답에 대응했다'는 것은 구체적으로 어떤 상태? 어떻게 구현해야합니까? 라고 머리의 정리가 필요했기 때문에 정리했습니다.

반응형 디자인이란?

우선, 재차 응답형 디자인이란 「어떤 단말의 브라우저로 표시해도 보기 쉬운 Web 페이지의 디자인」입니다.

PC나 스마트폰, 태블릿과 다른 디스플레이 크기의 단말기에서 같은 웹페이지를 표시했을 때, 모든 단말기에서 PC용 디자인으로 표시하면 스마트폰이라면 화면이 너무 작아서 보기 힘들거나 합니다.
반대로, 스마트폰만을 상정해 구현한 페이지는, 대형 PC의 디스플레이로 보면(자) 사이 연장해 보일지도 모릅니다.
이러한 문제를 해결하고 표시하는 디스플레이의 크기에 따라 보기 쉬운 디자인을 표시하는 것이 "반응형 디자인"입니다.

각 요소의 "사이즈"를 어떻게 대응하는 것이 가장 좋은가?

디자인에 관한 것이므로, Web 페이지에 의해서 어떻게 보이는 것이 베스트인가는 다른가 생각합니다만, 베이스가 되는 생각은 정리해 두려고 생각합니다.
여기서는 각 요소의 "크기"에 대해 정리합니다.

사이즈에 대한 대응 방법을 크게 다음 3가지로 나누었습니다.

패턴 1 ... 디스플레이 크기에 관계없이 일정한 크기를 표시합니다.

패턴 2···전환할 포인트(디스플레이의 가로폭이 00px 이상/이하의 경우)를 설정하고, 디스플레이의 크기에 따라 사이즈를 전환한다.

패턴 3 ... 티스 플레이의 크기에 따라 항상 표시되는 크기를 변경합니다.

각 요소에 대해 다음과 같이 대응하는 것이 최선이 아닐까 정리해 보았습니다.

각 패턴의 구현 방법

패턴 1(일정)

px, rem, em, % 등의 단위를 사용하여 크기를 지정합니다.
단위의 상세는 여기 에 기재되어 있습니다.

어떤 단위를 선택하느냐에 따라 사이즈 설정 방법은 달라지지만, 디스플레이를 확대/축소해도 초기 표시의 사이즈에서는 바뀌지 않습니다.

패턴 2(포인트로 전환)

CSS의 "미디어 쿼리"라는 설정을 추가하여 지정된 크기 이하의 디스플레이 디스플레이의 경우 CSS를 전환할 수 있습니다.
구체적인 설정 방법은 이 사이트 이 자세하고 알기 쉽습니다.
전환 포인트(max-width)를 어느 정도의 사이즈로 하는지입니다만, 대략 600px 전후로 전환하도록 설정하고 있는 것이 많은 것 같습니다.

패턴 3(부드럽게 변동)

vw · vh와 같은 단위를 사용하여 크기를 지정합니다. 디스플레이의 크기에 대한 비율로 각 요소의 크기가 결정되므로, 디스플레이를 확대·축소하면 각 요소도 확대·축소합니다.
단위의 상세는 이 기사 를 알기 쉽습니다.

사이즈 이외의 대응에 대해서

각 요소의 크기 외에도 디자인에 고려해야 할 사항이 있습니다.
예를 들면, 디스플레이의 사이즈에 의해 박스 요소를 옆에 늘어놓을까, 세로에 늘어놓을까···1열 표시인가, 3열 표시인가···등 레이아웃 자체를 전환하고 싶은 경우도 있을까 생각합니다. 이 경우 パターン2 의 미디어 쿼리를 사용하여 CSS를 전환해야 합니다.
그 근처는 또 정리가 필요하면 쓰려고 합니다.

참고

초보자도 알 수 있다! 반응형 디자인을 만드는 방법

CSS에는 vw, vh, vmin, vmax라는 단위가 있습니다 | Developers.IO

【CSS】결국 반응형에서의 폰트 사이즈는 어떻게 써야 하는가? | SEO 대책이라면 주식회사 페코플라

HTML의 폰트 사이즈로 최대치·최소치를 지정하는 방법을 현역 엔지니어가 해설【초보자용】 | TechAcademy 매거진