Question

我尝试建立一个特殊登陆网站。具体设计我想像这样构建它。

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

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

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

我的行元素不再像正方形了。如何通过我的设计保持响应来解决这个问题？

Answer 1

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

Answer 2

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

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

顺便说一句，这是一个双倍的保证金最高定义

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

2 个答案: