應用媒體查詢之前，它應該

Question

快速問題，我似乎無法解決的媒體查詢...我有一個捐贈頁面，我希望按鈕顯示爲2行和2列，直到我闖入手機樣式大約770px，我希望它們在1列中顯示爲塊元素。

但是，當我編寫相應的媒體查詢時，它適用於所有屏幕尺寸，而不是僅當我低於770像素時...幫助？下面是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; 
     } 
    } 

Answer 1

我創建了從ASP生成的HTML中的jsfiddle。

這就是：https://jsfiddle.net/qmxx1emp/

@media (max-width: 760px) { 
    #btn10, #btn20, #btn50, #btn100, #btnOther { 
     display: block; 
     float: none; 
     margin: 25px auto; 
    } 
} 

，但我看不出有什麼問題。媒體查詢似乎適用於正確的斷點。

（對不起提交此作爲一個答案，但我沒有足夠的代表對您的問題進行評論）