特別な2行4列メニュー対応のデザイン

私は特別なランディングページでウェブサイトを構築しようとしました。私はそのようなものを作りたいと思っています。特別な2行4列メニュー対応のデザイン

<body> 
<div id="wrapper"> 
    <div id="header_section"> 
    </div> 
    <div id="main_section"> 
     <div id="menu_section"> 
      <div class="first_row"> 
       <div class="row_element_4 first_element_row"></div> 
       <div class="row_element_4"></div> 
       <div class="row_element_4"></div> 
       <div class="row_element_4"></div> 
      </div> 
      <div class="second_row"> 
       <div class="row_element_4 first_element_row"></div> 
       <div class="row_element_4"></div> 
       <div class="row_element_4"></div> 
       <div class="row_element_4"></div> 
      </div> 

     </div> 
    </div> 
    <div id="footer_section"> 

    </div> 
</div>

とCSS：に示したように、私は、ウィンドウのサイズを変更する場合

/* Main Section */ 
#main_section 
{ 
background: url("../images/background/bg_person.jpg"); 
width: 100%; 
height: 70%; 
background-repeat: no-repeat; 
background-size: cover; 
    overflow: hidden; 
} 
#menu_section 
{ 
    margin: 0 auto; 
width: 95%; 
    margin-top: 1%; 
    height: 95%; 
    background: blue; 
} 
.first_row 
{ 
    background: red; 
    width: 100%; 
    height: 49%; 
} 
.second_row 
{ 
    background: orange; 
    width: 100%; 
    height: 49%; 
    margin-top: 1%; 
} 
.row_element_4 
{ 
    height: 100%; 
    width: 24%; 
    background: aqua; 
    float: left; 
    margin-left: 1%; 
} 
.first_element_row 
{ 
    margin-left: 0.5%; 
}

私の問題は、応答性のデザインです

は、これを行うために、私は次のコードを書きました以下の画像：

私の行要素はもう正方形のようには見えません。私のデザインが反応し続けるこの問題を解決するにはどうすればよいですか？

出典

2017-01-11 Marcel Merz

期待される結果は何であるのか？ –

'height'を常に' width'と同じにするには、コードからハードコードされた 'height'プロパティを削除する必要があります。 –

[Fiddle]（https://jsfiddle.net/54zLpdr1/）を確認してください。それはあなたのために役立つことがあります。 –

使用position: relative; は、私はあなたが便利vwとvhユニットを見つけることだと思うここhttp://www.w3schools.com/cssref/pr_class_position.asp

出典

2017-01-11 13:29:45 proofzy

それを確認してください。幅と高さが等しい95vwある定義し、あなたがところで理想的な正方形の

#menu_section 
{ 
    margin: 0 auto; 
    width: 95vw; 
    margin-top: 1%; 
    height: 95vw; 
    background: blue; 
}

を得るでしょう、ここで倍増マージントップ定義

出典

2017-01-11 13:36:53 Banzay

特別な2行4列メニュー対応のデザイン

答えて

関連する問題