50 % 너비 상자에서 반응이 좋은 디자인

Question

나는 두 상자를 가지고 있는데, 각 상자는 width: 50%;이고 서로 옆에 float으로 표시됩니다. 하나는 흰색 배경, 다른 하나는 회색 배경입니다.

페이지 너비가 축소됨에 따라 상자는 서로 옆에 머문다. 최소한의 크기에서는 상자를 작게 만들지 않습니다. 여기 그들은 서로 아래로 뛰어 내려야합니다.

그들은 이렇게 잘합니다. 그러나 흰색과 회색 상자는 50 % 너비를 유지합니다.이 시점에서 그들은 전체 너비 100 %를 채워야합니다.

The issue is seen here 동영상 바로 아래

(최소 폭은 지금 여기에 어떤 차이를하지 않고, 그냥 페이지에 어떤 임의의 값 (100 픽셀)로 설정됩니다.)

이 반응 효과에 대한 적절한 방법은 무엇입니까 때문에, 제품은 작은 화면에서 풀 사이즈이지만 큰 화면에서 서로 옆에 설 수 있습니까?

Answer 1

모바일 우선 설정에서이 문제에 쉽게 접근 할 수 있습니다. 열을 형성하기 시작할 중단 점까지 상자를 100 % 너비로 설정하십시오. 패딩을 고려하여 당신이 폭에 대한 비율을 사용하려고하는 경우 또한

.column_selector { 
    box-sizing: border-box; 
    width: 100%; 
} 
@media all and (min-device-width: 600px) { 

    .column_selector { 
     width: 50%; 
    } 
} 

, 내가 box-sizing: border-box를 사용하는 것이 좋습니다 것 : 예를 들어, 당신은 600PX 장치 폭과 큰에서 열을 형성 시작을 원했다 너비 계산에서.

Answer 2

@media을 사용하여 다른 창 크기에 대한 몇 가지 특별한 규칙을 설정하십시오. 다음과 같음 :

.div1 { 
    float: left; 
    width: 50%; 
} 

.div2 { 
    float: left; 
    width: 50%; 
} 

@media (max-width: 600px) { 
    .div1 { 
     width: 100%; 
    } 

    .div2 { 
     width: 100%; 
    } 
} 

여기는 fiddle입니다.