调整窗口

时候我已经在Visual Studio 2012年我想要做的写有默认的Web应用程序项目一个简单的Web应用程序隐藏特定的div元素，是隐藏2个<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>

来源

2014-03-03 Alist3r

这将涉及到响应CSS的方法，并没有涉及到ASP.NET本身。 – sshow

查找CSS媒体查询，当您调整窗口的大小，以你想要的任何一个单元，您可以设置元素显示：无; – Kyle

你可以使用CSS媒体查询，像这样：

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

上面的实例将隐藏与在浏览器上的类。我-DIV与768px或以上的分辨率的任何DIV。

来源

2014-03-03 14:19:01

使用媒体查询此，由凯尔塞文欧克斯评论。约mediaqueries

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

.classToHide { 
display: none; 
} 

}

的更多信息：

来源

2014-03-03 14:18:46 MysticEarth

回答

相关问题