我在 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;
}
网站管理员
<%@ 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>
最佳答案
您可以使用 CSS 媒体查询，如下所示:
@media (min-width: 768px) {
.my-div {
display: none;
}
}
上面的示例将在分辨率为 768px 或以上的浏览器上隐藏任何具有 .my-div 类的 DIV。
关于html - 调整窗口大小时隐藏特定的 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22148813/