我在一个 Bootstrap 网站上工作，我有一个 Canvas 外的侧边栏，我被插入查看并在选择关闭图标时推回。它工作正常，但我需要找到一种方法使其达到移动 View 的 100% 宽度。侧边栏的工作方式，我无法仅通过使用媒体查询的 css 来执行此操作，因为它在打开时使用 JavaScript 来设置侧边栏宽度的样式。我目前将其设置为打开时宽度为 45%，这是桌面 View 所需的宽度。但是，在移动设备 View 中，它需要扩展整个宽度 (100%)，因为在该移动设备尺寸下 45% 的宽度是不够的。我是 JS 的新手，所以我不确定如何使用 JS 来做到这一点。有没有办法用JS设置特定分辨率断点的宽度？
感谢您的帮助。
下面是我的代码: HTML:
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<h2>Button to open side menu</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
</body>
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
JS:
function openNav() {
document.getElementById("mySidenav").style.width = "45%";
document.getElementById("main").style.marginRight = "45%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
最佳答案
最佳做法是不要尝试直接使用 JavaScript 来操作 CSS。您可以设置类名，而不是将宽度设置为“45%”或“0”:
function openNav() {
document.getElementById("mySidenav").className = "sidenav open";
document.getElementById("main").className = "open";
}
function closeNav() {
document.getElementById("mySidenav").className = "sidenav";
document.getElementById("main").className = "";
}
并添加这些 CSS:
#mySidenav {
width: 0;
}
#main {
marginLeft: 0;
}
#mySidenav.open {
width: 45%;
}
#main.open {
marginRight: 45%;
}
/* on mobile */
@media screen and (max-width: 320px) {
#mySidenav.open { width: 100%; }
#main.open { marginRight: 100%; }
}
希望对您有所帮助。
关于javascript - 使用 JS 使移动设备的 Off-Canvas 侧边栏宽度为 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47587544/