Javascript if/else 语句关于屏幕尺寸

Question

我是 Javascript 新手，花了大约三个小时寻求这方面的帮助，但找不到任何适合我的内容。

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

非常感谢!

        /* Open Nav */
    function openNav() {
    		
    	if  (screen.width >= 768) {
        document.getElementById("myNav").style.width = "100%";
    	} else {
    	document.getElementById("myNav").style.height = "100%";	
    	}
    }
    
    
    	
    /* Close Nav */
    function closeNav() {
    		
    	if (screen.width >= 768) {
        document.getElementById("myNav").style.width = "0%";
    	} else {
    	document.getElementById("myNav").style.height = "0%";
    	}
    }

        /****************************** OVERLAY MENU START ***********************/
    
    .overlay {
        /* Height & width depends on how you want to reveal the overlay (see JS below) */   
        height: 100%;
    	min-height: 500px;
    	width: 100%;
        position: fixed; /* Stay in place */
        z-index: 1000; /* Sit on top */
        left: 0;
    	top: 0;
        background-color: #000000;
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.4s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    }
    
    /* Position the content inside the overlay */
    .overlay-content {
        width: 100%; /* 100% width */
    	margin-left:auto;
    	margin-right:auto;
        text-align: center; /* Centered text/links */
    }
    
    /* The navigation links inside the overlay */
    .overlay a {
        padding: 22px;
    	font-family: 'gothammedium', Arial, sans-serif;
        text-decoration: none;
        font-size: 16px;
    	text-transform:uppercase;
    	letter-spacing: 3px;
        color: #ffffff;
        display: block; /* Display block instead of inline */
        transition: 0.3s; /* Transition effects on hover (color) */
    	text-align:center;
    }
    
    /* When you mouse over the navigation links, change their color */
    .overlay a:hover, .overlay a:focus {
        color: #292929;
    	text-decoration:none;
    	transition: 0.3s; /* Transition effects on hover (color) */
    }
    
    /* Position the logo (top) */
    .overlay a.logo img {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	margin-top:45px;
    	margin-left:auto;
    	margin-right:auto;
    	width: 35px;
    	height: 40px;
    }
    
    /* Position the close button (bottom) */
    .overlay a.closebtn img {
        position: absolute;
    	bottom: 0;
    	left:0;
    	right:0;
    	margin-bottom: 50px;
    	margin-left:auto;
    	margin-right:auto;
    	width: 25px;
    	height: 25px;
    }
    
    .overlay .main_menu {
    	position:absolute;
    	top:30%;
    	bottom: 70%;
    	left:0;
    	right:0;
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	white-space: nowrap;
    }
    
    .menu_link {
    	text-align:center;
    	
    }
    
    .current_page {
    	white-space: nowrap;
    	color: #292929 !important;
    	text-decoration:none;
    }
    
    /****************************** OVERLAY MENU FINISH ***********************/

<div id="btns">
<button onClick="openNav();">Open</button>
</div>
<!-- Overlay content -->  
        <div id="myNav" class="overlay" style="width:0px;">  
                <div class="overlay-content">
                        <a class="logo"><img src="images/logo.png" alt="logo"></a>
                            
                            <!--Website Menu-->
                            <div class="main_menu">
                                <a class="menu_link current_page" href="#">work</a>
                                <a class="menu_link" href="#">about</a>
                                <a class="menu_link" href="#">contact</a>
                            </div>    
                            <!--Website Menu End-->
                            
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
                        <img src="images/burger-nav-close.png" alt="burger-nav"></a>
                </div>
        </div>
        <!--Overlay End-->

我认为这就是您需要的全部代码。如果您需要更多信息，请告诉我:) 再次感谢您!

Answer 1

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

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