Question

媒体查询的快速问题，我似乎无法解决...我有一个捐赠页面，我希望按钮显示为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;
        }
    }

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

但我没有看到任何问题。媒体查询似乎适用于正确的断点。

（很抱歉提交此作为答案，但我没有足够的代表对您的问题发表评论）

媒体查询应用之前应用

1 个答案: