Question

我终于能够让我的网站重新建立并完成它，但我对前端并不满意。

我目前的目标是让移动显示屏显示2行中的2个项目。

但我的问题是，当我使用Chrome移动视图和我的个人手机时，它仍会复制来自＆＃34; fbox＆＃34;的属性。

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

Answer 2

你说你想要连续两件物品。但是你的css

.mfbox { ... 的宽度：100％; 的高度：200像素; 显示：块; } 表示连续一个项目，宽度为100％＆amp;高度为200px。

同样在你的代码中你会遇到问题，因为你有两个类，而在css中你按照.mfbox＆amp;的顺序为这两个类定义了样式。 .fbox。因此，在应用css样式时，显然只需要稍后定义的样式。

但是，如果要为移动视图应用不同的css而对桌面应用不同的css，则不必使用两个类。你只需要一个班级就可以解决这个问题。在css中可以处理@media。

例如：

.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; } @media (max-width:767px){ .fbox{ width:100%; height:200px; display:block } }

不确定我犯的是什么类型的错误。 CSS3＆amp;移动显示

2 个答案: