屏幕大小上的Javascript if/else语句

我是Javascript新手，已经花了大约三个小时来寻找这方面的帮助，但我找不到任何特定于我的东西

我正在设计一个滑动导航，当在桌面上观看时，导航覆盖从屏幕的左侧滑动到100%宽度。但在平板电脑/移动设备上，它会从顶部滑到设备高度的100%

非常感谢你

/*开放导航*/
函数openNav（）{
如果（屏幕宽度>=768）{
document.getElementById（“myNav”）.style.width=“100%”；
}否则{
document.getElementById（“myNav”）.style.height=“100%”；
}
}
/*近距离导航*/
函数closeNav（）{
如果（屏幕宽度>=768）{
document.getElementById（“myNav”）.style.width=“0%”；
}否则{
document.getElementById（“myNav”）.style.height=“0%”；
}
}

/******************************覆盖菜单开始***********************/
.覆盖{
/*高度和宽度取决于您想要显示覆盖的方式（请参见下面的JS）*/
身高：100%；
最小高度：500px；
宽度：100%；
位置：固定；/*保持原位*/
z指数：1000；/*位于顶部*/
左：0；
排名：0；
背景色：#000000；
溢出-x:隐藏；/*禁用水平滚动*/
过渡：0.4s；/*0.5秒过渡效果以滑入或滑下覆盖层（高度或宽度，取决于分隔缝）*/
}
/*将内容放置在覆盖内*/
.覆盖内容{
宽度：100%；/*100%宽度*/
左边距：自动；
右边距：自动；
文本对齐：居中；/*居中文本/链接*/
}
/*覆盖中的导航链接*/
.覆盖{
填充：22px；
字体系列：“gothammedium”，Arial，无衬线；
文字装饰：无；
字体大小：16px；
文本转换：大写；
字母间距：3px；
颜色：#ffffff；
显示：块；/*显示块而不是内联*/
过渡：0.3s；/*悬停时的过渡效果（颜色）*/
文本对齐：居中；
}
/*将鼠标悬停在导航链接上时，请更改其颜色*/
.overlay a:悬停，.overlay a:焦点{
颜色：#292929；
文字装饰：无；
过渡：0.3s；/*悬停时的过渡效果（颜色）*/
}
/*定位徽标（顶部）*/
.叠加a.标识img{
位置：绝对位置；
排名：0；
左：0；
右：0；
边缘顶部：45像素；
左边距：自动；
右边距：自动；
宽度：35px；
高度：40px；
}
/*定位关闭按钮（底部）*/
.叠加a.闭合B.插入{
位置：绝对位置；
底部：0；
左：0；
右：0；
边缘底部：50px；
左边距：自动；
右边距：自动；
宽度：25px；
高度：25px；
}
.overlay.main_菜单{
位置：绝对位置；
最高：30%；
底部：70%；
左：0；
右：0；
显示：块；
左边距：自动；
右边距：自动；
空白：nowrap；
}
.菜单链接{
文本对齐：居中；
}
.当前页面{
空白：nowrap；
颜色：#292929！重要；
文字装饰：无；
}
/******************************覆盖菜单完成************************/

打开

您应该在CSS中使用@media注释

@media only screen and (max-width: 768px) {
    /*For mobile phones*/
    #myNav {
        width: 100%;
    }
}

---

您应该在CSS中使用@media注释

@media only screen and (max-width: 768px) {
    /*For mobile phones*/
    #myNav {
        width: 100%;
    }
}

---

您是否在任何地方触发此代码？您应该在所有情况下同时更新

宽度

和

高度

。目前，您只更新您认为相关的一个，但会有一些情况不包括在本文档中。您期望什么？仅在两者上进行水平滑动？我希望在台式机/笔记本电脑上进行水平滑动，但如果小于此值，则为垂直滑动。您是否在任何位置触发此代码？在所有情况下，您都应同时更新

宽度
和
高度
。目前，您只更新您认为相关的一个，但会有一些情况不包括在本文档中。您期望什么？只有水平滑动？我想在台式机/笔记本电脑上水平滑动，但比这个小，它是垂直滑动。所以我根本不会使用javascript？你也可以通过css来做这件事，但你想使用java脚本，你应该得到设备的高度和宽度，然后在关闭和打开功能上应用它。很抱歉，我没有遵循，所以我会在Javascript中添加高度？我很困惑。我已经将您提供的代码添加到我的CSS中，但它不起作用，当我的网站在移动设备上时，覆盖导航仍然从侧面滑出（桌面上应该是这样），而不是向下滑出。我的导航功能在桌面上运行得很好，只是在移动/平板设备上不行。所以我根本不会使用javascript？你也可以通过css来实现，但如果你想使用java脚本，你应该获得设备的高度和宽度，然后将其应用于关闭和打开功能。很抱歉我没有遵循，所以我会在javascript中添加一个高度？我很困惑。我已经将您提供的代码添加到我的CSS中，但它不起作用，当我的网站在移动设备上时，覆盖导航仍然从侧面滑出（桌面上应该是这样），而不是向下滑出。我的导航功能在桌面上运行得很好，但在移动/平板电脑设备上却不行。