特殊 2 行 4 列菜单 - 响应式设计答案

【问题标题】：Special 2 row 4 column Menu - responsive design特殊 2 行 4 列菜单 - 响应式设计
【发布时间】：2017-05-26 07:42:36
【问题描述】：

我尝试建立一个带有特殊登录页面的网站。设计特定我想像那样构建它。

为此，我编写了以下代码：

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

当我调整窗口大小时，我的问题是响应式设计，如下图所示：

我的行元素看起来不再像正方形了。如何在我的设计保持响应时解决此问题？

【问题讨论】：

预期结果是什么？
如果您希望height 始终等于width，那么您需要从代码中删除硬编码的height 属性。
检查这个Fiddle。可能对你有帮助。

标签： html css responsive-design resize

【解决方案1】：

使用position: relative; 在这里查看http://www.w3schools.com/cssref/pr_class_position.asp

【讨论】：

【解决方案2】：

我认为您会发现有用的 vw 和 vh 单位。定义宽度和高度等于 95vw，你会得到理想的正方形

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

顺便说一句，这是一个加倍边距顶部的定义

【讨论】：