div 태그를 사용하는 반응 형 테트리스 격자

Question

자습서없이 javaScript와 HTML을 사용하여 테트리스 게임을 만들려고합니다. 내 방법은 매우 원시적입니다. div 태그를 사용하여 그리드를 만들고 있습니다. 문제는 예상했던 것만 큼 반응이 없다는 것입니다. 나는 각 사각형이 스타일을 사용하고

   <div class="row"> 
       <div id="sq1" class="square fender">&nbsp;</div> 
       <div id="sq2" class="square free">&nbsp;</div> 
       <div id="sq3" class="square free">&nbsp;</div> 
       <div id="sq4" class="square free">&nbsp;</div> 
       <div id="sq5" class="square free">&nbsp;</div> 
       <div id="sq6" class="square free">&nbsp;</div> 
       <div id="sq7" class="square free">&nbsp;</div> 
       <div id="sq8" class="square free">&nbsp;</div> 
       <div id="sq9" class="square free">&nbsp;</div> 
       <div id="sq10" class="square free">&nbsp;</div> 
       <div id="sq11" class="square free">&nbsp;</div> 
       <div id="sq12" class="square fender">&nbsp;</div> 
      </div> 

:

이 내 그리드에서 하나의 행입니다

.square { 
float: left; 
width: 6%; 
padding-bottom: 6%; 
border-top: 1px solid black; 
border-left: 1px solid black;} 

는하지만 페이지 크기를 조정할 때 내 사각형 사각형으로 변화하고있다. 나는 또한 다음 작은 조각을 보여주기 위해 비슷한 작은 격자를 사용한다. 다른 태그로 둘러싸여있어 아마 변형 될 수 있습니다. (전체 프로젝트는 codepen입니다.)

제 사각형을 쉽게 만들 수있는 방법이 있습니까? 반응 형 사각형을 만드는 방법을 여러 가지 발견했지만 그 중 아무 것도 나를 위해 일하지 않았습니다.

Answer 1

당신은 이미 가지고있는 것과 거의 같습니다.

마크 업을 보면 12 개의 사각형이 연속적으로 나타나기 때문에 나는 width: 8%;을 사용했습니다. 그리고 올바르게 시도한대로 padding-bottom을 8 % 일치로 추가해야합니다. 예 :   당신이 당신의 div 사각형의 모든에 추가하기 때문에

.square { 
    float: left; 
    width: 8%; 
    padding-bottom: 8%; /* = width for a 1:1 aspect ratio */ 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
} 

당신의 사각형은 가로 세로 비율 고정되지 않은 이유는. 너는 높이를 증가시킬 것이기 때문에 (절대적으로 위치하는 아이들없이) 정사각형 안에 내용을 직접 추가 할 수 없으므로 정사각형은 더 이상 정사각형이 아니게된다.

공백을 모두 제거하면 정사각형의 화면 비율이 유지됩니다.

마지막으로, 나는 관련이없는 HTML 오류이기는하지만 사소한 몇 가지를 정돈하고, 전체 갈래 예는 여기에 있습니다 : https://codepen.io/ahdigital/pen/LeNNWY?editors=1100