html - 不确定我犯了什么类型的错误。 CSS3 和移动显示

Question

我终于能够恢复我的网站并完成构建，但我对前端不满意。

我目前的目标是在移动设备上显示 2 行 2 项。

但我的问题是，当我使用 Chrome 移动 View 和我的个人手机时，它仍然从“fbox”复制属性。

HTML:

<div id="row"1><div class="fbox mfbox" id="breast">test </div>
<div class="fbox mfbox" id="facial">test </div></div>

<div id="row2"><div class="fbox mfbox" id="body"> test</div>
<div class="fbox mfbox" id="surgery">test </div></div>

CSS:

@media (max-width:767px){
.mfbox{
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:100%;
height:200px;
display:block;
}
.row1{
    clear:both;
}
.row2{
    clear:both;
}
}

.fbox{
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}

我已将其添加到 JSfiddle ，但它似乎没有产生我的网站所产生的结果。

我的网站:网站已删除。

Answer 1

像下面这样在.fbox下写媒体查询

---

.fbox{
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    width:22%;
    height:200px;
    display:inline-block;
    margin:10px;
}

#row1, #row2 {
    clear: none;
}

@media (max-width:767px){
 .mfbox{
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    width:100%;
    height:200px;
    display:block;
 }
 #row1{
    clear:both;
 }
 #row2{
    clear:both;
 }
}

参见 fiddle

在您的情况下，首先 .mfbox 应用良好，但在 .mfbox 之后还有另一个 css .fbox，因此 css 从 .mfbox 替换为 .fbox，在这种情况下，您应该在底部应用 midea 查询。

在媒体查询之外时清除，
并在使用 id
时使用 # 而不是 .即 #row1 而不是 .row1