CSS의 반응 형 2 열 사각형

Question

전체 너비의 50 %를 차지하는 사각형이있는 반응 형 페이지를 만들려고합니다 (행당 2 개의 사각형). (아이폰 6/7 플러스 포함) 모바일에서 그 사각형은 다른 미만해야하지만 다음 코드를 사용하여 작동하지 않는 곳이다 :

.square { 
    width: 100vw; 
    height: 100vw; 
    float: left; 
} 

@media (min-width: 1170px) { 
    .square {width: 50vw; height: 50vw; } 
} 

가 이상적으로는 부트 스트랩을 사용하지만 난 방법을 알아낼 수 없습니다 사각형을 만듭니다.

Answer 1

부트 스트랩 예 :

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-6"> 
     <div class="square"></div> 
    </div> 
    <div class="col-lg-6"> 
     <div class="square"></div> 
    </div> 
    </div> 
</div> 

CSS :

.square { 
    height: 0; 
    padding-bottom: 100%; 
    background-color: green; 
} 

http://codepen.io/Deka87/pen/yMrmKK

Answer 2

이 같은 것을 찾고 계십니까? https://jsfiddle.net/5xc8fs0a/

패딩 비율은 너비를 기반으로하므로 패딩 하단 : 100 %는 높이와 너비가 정확히 동일하다는 사실을 이용합니다.

.square { 
    float: left; 
    width: 48%; 
    margin-right: 1%; 
    background: red; 
} 

.square:after { 
    content: ''; 
    display: inline-block; 
    height: 0; 
    padding-bottom: 100%; 
}