Question

我在Visual Studio 2012中编写了一个带有默认Web应用程序项目的简单Web应用程序。我想要做的是在调整浏览器窗口大小时隐藏两个<div>元素。我怎么能这样做？

CSS

html {
    width: 100%;
    height: 100%;
    min-height: 100%;
}


body {
    background-color: white;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    min-height: 100%;
}

.bodycontainer {
    background-color: white;
    clear: both;
    padding-top:30px;
    min-height: 100%;
    height: 100%;
    padding-bottom: 30px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}


header {
    padding-top: 20px; 
    width: 60%;
    margin: 0 auto;
}

的Site.Master

<%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Site.master.vb" Inherits="app.SiteMaster" %>

<!DOCTYPE html>
<html lang="it">
<head runat="server">
    <meta charset="utf-8" />

    <link href="content/CustomStyle.css"    rel="stylesheet" type="text/css" />
    <link href="content/jquery.qtip.css"    rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery.qtip.js"></script>
    <script type="text/javascript" src="Scripts/jquery.floatThead.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="Scripts/jquery.tablesorter.widgets.js"></script>

    <title><%: Page.Title %> - Methodo</title>

    <asp:PlaceHolder runat="server">        
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" /> 
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>

    <form runat="server">
    <asp:ScriptManager runat="server">
        <Scripts>
            <%--Framework scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />    
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site scripts--%>

        </Scripts>
    </asp:ScriptManager>

    <script type="text/javascript">
        function goToLogin() {
            window.location.href = "LoginHandler.new";
            return false;
        }
    </script>
    <header>

            <div class="float-left">

                    <a id="homeLink" runat="server" href="~/"><img runat="server" src="~/Images/logoFinal.png" /></a>

            </div>

            <div class="float-right">
                <section class="topmenu">


                            <ul>
                            <%
                                If (Session.Item("Logged") = True) Then
                            %>
                                    <li><a id="dispLink" runat="server" href="~/VerificaDisp.aspx">Disponibilita'</a></li>
                                    <li><a id="commesseLink" runat="server" href="~/GestioneComm.aspx">Commesse</a></li>
                                    <li><a id="goHomeLink" runat="server" href="~/Home.aspx">Home</a></li>
                                    <li><a id="logoutLink" runat="server" href="~/Home.aspx" OnClick="return goToLogin();">Logout</a></li>
                            <%
                                Else
                            %> 
                                    <li class="customLi"><a id="defaultLink" runat="server" href="~/Default.aspx">Login</a></li>
                            <%
                                End If  
                            %>
                            </ul>



                </section>     
            </div>     
    </header>


    <div class="bodycontainer">
        <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
        <asp:ContentPlaceHolder runat="server" ID="MainContent" /> 
    </div>



    </form>
</body>
</html>

Answer 1

您可以像这样使用css媒体查询：

@media (min-width: 768px) {
    .my-div {
        display: none;
    }
}

以上示例将在分辨率为768px或更高的浏览器上隐藏任何带有.my-div类的DIV。

Answer 2

使用媒体查询，如Kyle Sevenoaks评论。

@media screen and (max-width: 900px) {

.classToHide {
display: none;
}

}

有关媒体查询的更多信息：

调整窗口大小时隐藏特定的div元素

2 个答案: