divタグを使用したレスポンステトリスグリッド

Question

私は、チュートリアルなしでjavaScriptとHTMLを使用してテトリスゲームを構築しようとしています。私の方法は非常に原始的です。 divタグを使用してグリッドを作成しています。問題は、それが私が期待したほど反応していないということです。

これは私のグリッドから1行です：

   <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％も一致するものを追加する必要があります。例えば。

.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; 
} 

あなたの四角は、そのアスペクト比に固定されていなかった理由は、あなたがあなたのdiv正方形のすべてに追加 です。正方形内にコンテンツを直接追加することはできません（絶対配置された子なし）ので、高さが増加するため、正方形はもはや正方形になりません。

これらのスペースをすべて削除すると、四角形のアスペクト比が維持されます。

最後に、私は無関係なHTMLのエラーはいえマイナーのカップルを片付け、そして完全なフォーク例はここにある：https://codepen.io/ahdigital/pen/LeNNWY?editors=1100