Javascript根据屏幕大小调整侧边栏宽度%

Question

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

即：

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

如果用户在767px的屏幕上，则侧边栏将向外推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