반응 형 웹 디자인에서 중첩 된 열의 중단 점을 결정하는 방법은 무엇입니까?

Question

너비가 50 % 인 두 열, 예를 들어 c1과 c2가 있다고 가정합니다. c1에는 너비가 각각 30 % 및 70 % 인 두 개의 중첩 열 c1-1 및 c1-2가 있습니다.

최소 150px 너비 인 경우, 즉이 화면 크기가 1000px 이상일 때 c1-1의 콘텐츠가 가장 잘 표시된다고 가정 해보십시오. 중첩 된 열이 부모보다 먼저 중단되어야하는 상황에서 당신은 무엇을 할 것입니까?

max-width : 1000px에서 중단 점을 설정하고 c1-1과 c1-2를 너비 : 100 %로 설정 한 다음 나중의 중단 점에서 c1과 c2가 너비가 될 때 100 % 나는 c1-1과 c1-2를 30 %와 70 %의 폭으로 재설정 했습니까?

Answer 1

FWIW, 뷰포트에서 1000px 미만의 페이지 콘텐츠를 어떻게 표시 할 것인지에 대한 관점에서 접근해야한다고 생각합니다.

당신이 언급하는 접근 방식은 다음과 같습니다.

| --- C1-1 --- | | --- C2-1 --- |
| --- C1-2 --- | | --- C2-2 --- |

또 다른 옵션은 즉, 전체 폭 30 %와 70 %로 중첩 된 열로

을 C1과 C2를 정의, 뷰포트 < 1000px에있을 것입니다 | - C1-1 - | | ----- C1-2 ------ |
| - C2-1 - | | ----- C2-2 ------ |

큰 차이는 아니지만 실제 데이터에서는 중요 할 수 있습니다.

예를 들어, 아마도 C1-2 콘텐츠는 상대적으로 중요합니다. 그러나 첫 번째 예에서는 페이지 아래로 잘 밀릴 수 있습니다. 또한 두 번째 방법은 C1 및 C2 콘텐트를 시각적으로 함께 그룹화합니다.

행운을 빈다.