Question

我的项目中有一个侧边栏，可在单击事件中推出，而我想要实现的是根据用户屏幕的大小将侧边栏推入不同的宽度大小。

即：

如果用户在宽度为768px的屏幕上，并且在侧边栏上方，则将推出20％的宽度。

如果用户位于767像素的屏幕上，则侧边栏下方的按钮将以95％的宽度推出。

我在下面尝试了以下代码，但是，不管屏幕大小如何，它都无法以正确的方式工作，并且将边栏的宽度推到20％。

如果有人可以帮助，那就太好了！

 <a>
  <i class="sideNavBars fas fa-bars fa-2x" onclick="openNav()"></i>
</a>

<div id="mySidenav" class="sidenav text-center">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div>
   <p>Sidebar content</p>
  </div>
</dvi>


if ($(window).width() > 739) {
  function openNav() {
    document.getElementById("mySidenav").style.width = "20%";
    document.getElementById("sideBarWrapper").style.marginRight = "20%";
  }
}
else {
  function openNav() {
    document.getElementById("mySidenav").style.width = "95%";
    document.getElementById("sideBarWrapper").style.marginRight = "95%";
  }
}

Answer 1

为边栏提供一个类（这里是.sidenav）并添加媒体查询：

.sidenav {
    display: none;
}

@media(min-width: 768px){
    #mySidenav {
        width: 20%;
    }
}

@media(max-width: 767px){
    #mySidenav {
        width: 95%;
    }
}

然后添加这段代码：

openNav() {
    var sidebar = document.getElementById("sideNav");
    sidebar.classList.toggle("sidenav");
}

请参阅：https://www.w3schools.com/css/css3_mediaqueries_ex.asp

和：https://www.w3schools.com/howto/howto_js_toggle_class.asp

Javascript，可根据屏幕尺寸调整边栏宽度％

1 个答案: