응답성 및 컨테이너 쿼리

아래에 작성된 내용은 웹 개발에서 반응형 디자인 솔루션을 재검토하는 제 동료에 대한 답변입니다.

따라서 텍스트와 관련하여 rem을 사용해야 하며 글꼴을 확대하거나 확대할 때 미학에 신경 쓰지 말고 정렬 및 기능에 신경을 써야 합니다. 시각 장애가 있는 사람들은 글자를 읽을 수 없는 것보다 단조롭고 막힌 사이트가 되는 것을 선호할 것입니다. 보조 도구 간의 관계와 웹 페이지와 상호 작용하는 방식 때문에 rem이어야 하므로 확대/축소 외에 html 글꼴 크기를 확대하는 도구가 있습니다. 따라서 rem을 사용하면 그에 따라 모든 웹사이트가 확대됩니다.

이미지와 관련해서는 텍스트 크기와 관련되어서는 안 되며, 화면 크기만 관련되어야 하며, 텍스트에 비해 매우 작더라도 화면 너비보다 크게 늘어나면 안 됩니다. 텍스트는 거의 항상 더 중요합니다(이것은 내가 아는 UX 이야기에 가깝지만 FE 개발자이기 때문에 놓친 경우 조언이 필요함)

이제 까다로운 부분: 텍스트와 이미지가 파악되었습니다. 요소의 정렬/일반적인 모양과 느낌을 독립형으로 또는 서로 관련하여 처리하는 방법은 무엇입니까?
내 개인적인 의견(그리고 논쟁의 여지가 있기 때문에 밑줄을 긋는다)은 그러한 작업을 위해 화면 크기에 의존하는 것은 UI 안티 패턴이며 항상 이상한 코너 케이스로 이어진다는 것입니다.

예를 들어 큰 화면에 있을 때 작은 폼 팩터에 있는 사이드바 요소가 있고 작은 뷰포트에서는 전체 화면 너비에 맞춰집니다. 이제 절대적인 방식으로 작은 화면 변형이 일반적으로 큰 화면 변형보다 크지만 코드 측면에서는 다음과 같이 말합니다.

1.

If screen is bigger than 1024px show the small variant of that element

2.

On screens that is less than 1024px but bigger than 500px show the big variant of that element

삼.

On smaller screens that is less than 500px show the small variant of that element

이 방법은 혼란스럽고 정신적으로 일치하지 않습니다.

1024px < Viewport width: **small** variant of the element
1024px > Viewport width > 500px: **big** variant of the element
500px  > Viewport width: **small** variant of the element

그것은 투박하고 합산되지 않으며 그러한 단순한 일에 너무 많은 요소가 있습니다.

이제 내 솔루션 (또는 솔루션)은 MediaQuery in CSS 또는 whatever do the 기본적으로 JS 또는 through a framework 입니다.

개념은 간단합니다(이미 알고 계시다면 제 설명을 무시하세요) 기본적으로 뷰포트가 아닌 요소 크기 변경을 감시하는 쿼리입니다. 그리고 이를 기반으로 해당 요소의 스타일을 변경하거나 JS 솔루션이 클래스 이름 목록(또는 JS에서 동적으로 제어할 수 있는 항목)에서 변경/변경을 트리거하는 경우에 변경합니다.
이러한 동작은 중첩될 수 있으며 잘 작동합니다.

이제 제어 요소의 모양은 뷰포트 크기가 아니라 자체 크기(JS 솔루션에서 볼 수 있는 너비 ANDheight!)입니다. 따라서 요소가 어디에 있든 중요하지 않습니다! 그것은 자신의 크기에만 관심이 있고 중첩되어 있으면 거품이 일어나므로 부모에서 부모로 .... 등.
이제 위의 사이드바 요소 예제로 돌아가서 뷰포트 크기나 화면/창 크기 조정에 대해 걱정할 필요가 없습니다. 나는 요소가 부모를 따르거나 상대 너비 단위를 사용하도록 지시할 뿐입니다. 그리고 (요소 자체 참조) 너비가 300px 미만인 경우(예를 들어) 더 크면 작은 변형을 표시하고 큰 변형을 표시합니다. 이제 우리가 그것을 던지거나 이동하는 곳마다 완벽하게 보일 것입니다!

300px > element width: small variant of the element
300px < element width : big variant of the element

논리적으로 그리고 숫자적으로 그것은 전체 작은/큰 변형 옵션에 추가되며 요소가 사용되는 위치는 중요하지 않습니다!

Btw JS 솔루션은 performant 모든 요소에 대해 하나의 관찰자 이벤트를 사용하기 때문에 많은 요소에서 (개인적으로) 테스트되었습니다. 그래서 1000개 요소에 사용해도 아무 일도 일어나지 않은 것처럼 리사이징이 순조롭게 진행된다.
the CSS one is in dev trial stage still 때문에 JS 솔루션을 사용했습니다.

응답성을 파악하는 데 도움이 되는 충분한 정보였기를 바랍니다. 제가 쓴 내용에 오류가 있거나 오해가 있는 경우 알려 주시거나 연락해 주시기 바랍니다.