媒体查询的快速问题，我似乎无法解决...我有一个捐赠页面，我希望按钮显示为2行和2列，直到进入770px左右的移动样式为止，我希望它们显示为块1列中的元素。
但是，当我编写相应的媒体查询时，它适用于所有屏幕尺寸，而不仅是当我低于770px时...帮助？这是html：
<form id="simForm" runat="server">
<div align="center">
<%-- <asp:DropDownList ID="ddlDonation" runat="server" style="border-color: #2bde73;border-radius:4px; width: 80px; margin-top: 15px;background-color:#ededed; margin-bottom: 15px;" Height="40px" onchange="javascript:OnSelectedChanged(this,event);" >
<asp:ListItem Value="10">$10</asp:ListItem>
<asp:ListItem Value="20">$20</asp:ListItem>
<asp:ListItem Value="50">$50</asp:ListItem>
<asp:ListItem Value="100">$100</asp:ListItem>
<asp:ListItem Value="Other">Other</asp:ListItem>
</asp:DropDownList>--%>
<br />
<br />
<asp:Label ID="lblDonation" runat="server" Text="Thank you for completing the survey and being willing to donate to me and my team. The $5 from the survey will go to me and my team and so will whatever you choose to donate. (Total Donation Amount is the Donation Amount plus a 5% service fee)"
style="font-size: 18px;"></asp:Label>
<br />
<br />
<asp:Button ID="btn10" Text="$10" runat="server" />
<asp:Button ID="btn20" Text="$20" runat="server" />
<asp:Button ID="btn50" Text="$50" runat="server" />
<asp:Button ID="btn100" Text="$100" runat="server" />
<asp:Button ID="btnOther" Text="Other" runat="server" />
<asp:TextBox ID="txtOther" runat="server" onkeypress="return isNumberKey(event)"></asp:TextBox>
<asp:Button ID="btnDonate" Text="Donate Now" runat="server" />
</div>
</form>
</body>
</html>
和CSS：
#btn10 {
font-size: 16px;
padding: 18px 30px;
background-color: rgba(245, 245, 245, 0.96);
color: #000;
font-weight: bold;
border: 1px solid black;
border-radius: 6px;
text-align: center;
cursor: pointer;
margin-top: 25px;
float:left;
margin-left: 225px;
}
#btn20, #btn100 {
font-size: 16px;
padding: 18px 30px;
background-color: rgba(245, 245, 245, 0.96);
color: #000;
font-weight: bold;
border: 1px solid black;
border-radius: 6px;
text-align: center;
cursor: pointer;
margin-top: 25px;
float: right;
margin-right: 225px;
}
#btn50 {
font-size: 16px;
padding: 18px 30px;
background-color: rgba(245, 245, 245, 0.96);
color: #000;
font-weight: bold;
border: 1px solid black;
border-radius: 6px;
text-align: center;
cursor: pointer;
margin-top: 25px;
float: left;
margin-left: 225px;
}
#btnOther {
width: 200px;
font-size: 16px;
padding: 18px 30px;
background-color: rgba(245, 245, 245, 0.96);
color: #000;
font-weight: bold;
border: 1px solid black;
border-radius: 6px;
text-align: center;
cursor: pointer;
float: left;
display: block;
margin: 200px auto;
float: none;
}
#btnDonate {
width: 200px;
font-size: 16px;
padding: 18px 30px;
background-color: rgba(245, 245, 245, 0.96);
color: #000;
font-weight: bold;
border: 1px solid black;
border-radius: 6px;
text-align: center;
cursor: pointer;
float: left;
display: block;
margin: 40px auto;
float: none;
}
#btn10:hover, #btn20:hover, #btn50:hover,
#btn100:hover, #btnOther:hover {
background-color: #2bde73;
transition: 0.5s;
color: #fff;
}
#btn10:active, #btn20:active, #btn50:active,
#btn100:active, #btnOther:active {
background-color: #2bde73;
transition: 0.5s;
color: #fff;
}
@media (max-width: 760px) {
#btn10, #btn20, #btn50, #btn100, #btnOther {
display: block;
float: none;
margin: 25px auto;
}
}
最佳答案
我用从ASP生成的HTML创建了一个jsfiddle。
它是：https://jsfiddle.net/qmxx1emp/
@media (max-width: 760px) {
#btn10, #btn20, #btn50, #btn100, #btnOther {
display: block;
float: none;
margin: 25px auto;
}
}
但我没看到任何问题。媒体查询似乎适用于正确的断点。
（很抱歉将其作为答案提交，但我没有足够的代表对您的问题发表评论）
关于html - 媒体查询应在应用之前进行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32014533/