Question

因此，我现在正在创建一个具有几个不同屏幕尺寸的网页。我正在使用媒体查询来使网站具有响应性。我先编写了移动代码，在菜单中（汉堡图标后面）使用了两个最小尺寸（智能手机和平板电脑）的幻灯片。现在，我想将菜单更改为两个较大尺寸（笔记本电脑和台式机）的普通水平菜单栏，但我一生都无法解决。很抱歉，如果这是一个菜鸟问题，但我真的被卡住了。

CSS

body {
	font-family: 'Roboto', sans-serif;
	background-color: white;
	max-width: 100%;
	box-sizing: border-box;
	font-size: 3.5vw;
}

body a {
	text-decoration: none;
	color: #FFBF00;
}

* {
	box-sizing: inherit;
}

.menutoggle {
	cursor: pointer;
	padding: 1%;
}

.sidenav {
	height: 100%;
	width: 0%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #111;
	overflow-x: hidden;
	padding-top: 60px;
	transition: 0.5s;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 3.5vw;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 6vw;
  padding-left: 5%;
}

.menubutton {
	font-size: 6vw;
}

h1{
	display: inline;
	text-align: center;
	font-weight: 100;
	padding-bottom: 2%;
	padding-left: 10%;
}


img {
	max-width: 100%;
	}

.headerfoto {
	display: none;
}

.blogtekst {
	padding: 0 3% 3% 3%;
}

.blogImage {
	display: block;
	width: 100%;
	height: 20%;
}

.gridItem1 {
	border-bottom: 0.5px solid black;


}

.gridItem2 {
	border: 0.5px solid black;
}



.gridItem4 {
	border: 0.5px solid black;
	margin: 1%;
	padding: 3%;
}

.gridItem5 {
	border: 0.5px solid black;
	margin: 1%;
	
}

.gridItem6 {
	margin: 1%;
}

.gridItem8 {
	color: #FFBF00;
	margin: 1%;
}

.contactinfo {
	text-align: center;
}


.sociallinks {
	text-align: center;
	font-size: 7vw;
	margin-bottom: 2%;
}


/** tablet **/
@media only screen and (min-width: 1536px) and (max-width: 2879px) {

body {
	font-size: 3vw;
}



li {
	display: inline;
}

.blogImage {
	height: 40%;
}
}

/** laptop **/
@media only screen and (min-width: 2880px) and (max-width: 4095px) {

.headerfoto {
	display: block;
	
	
}




}

/** desktop **/
@media only screen and (min-width: 4096px)  {

body {
	max-width: 4096px;
	margin: auto;
}

.headerfoto {
	display: block;
	
	
}


}

HTML

<!DOCTYPE html>
<html lang="nl">
	<head>
		<meta charset="UTF-8" />
		<title>Navigation</title>
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		
		<link type="text/css" href="styles/grid_layoutsheet.css" rel="stylesheet" />
		<link type="text/css" href="styles/stylesheet.css" rel="stylesheet" />
		

		<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">

		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
		
	</head>
	<body>

		<div class="gridContainer">

			<header class="gridItem1">

				<div class="menutoggle">
	  				<a class="menubutton" onclick="openNav()">&#9776;</a>

				<h1>De kaasspeciaalzaak</h1>

				
	  			</div>
			</header>

			<nav id="menu" class="gridItem2 sidenav">
				<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
				
				<ul class="menuhor">
					<li><a href="#">Over ons</a></li>
					<li><a href="#">Onze winkel</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">Over kaas</a></li>
				</ul>
			
			</nav>

			<div class="gridItem3 headerfoto">
				<img src="img/header.jpg">
			</div>

			<p class="gridItem4 about">
				Welkom
				<br><br>
				Welkom bij Kaasspeciaalzaak Ed Boele in Den Haag. Wij hebben een passie voor kaas, die wij graag met onze klanten willen delen.
				<br><br>
				In onze ruime winkel aan de Fahrenheitstraat hebben we een assortiment kazen om U tegen te zeggen. Een overvloed aan Nederlandse en buitenlandse heerlijkheden. En elke kaas heeft z’n eigen verhaal. Een verhaal dat wij u graag doorvertellen. <a href="#">Lees meer op over ons</a>	
			</p>

			<div class="gridItem5 blog">
				<img class="blogImage" src="img/blogimg.jpg">
				<p class="blogtekst">
				Cheese, Bra Piemonte.
				<br><br>
				Vorige week zijn we samen met ons kaasteam op studiereis geweest naar Piemonte.  <a href="#">Lees meer op ons blog</a>	
				</p>			
			</div>
			
			<div class="gridItem6 gallerij"> <!-- Nu maar 1 foto, als er tijd is een caroussel -->
				<img src="img/cheese.jpg">
				
				
			</div>


			<div class="gridItem7 contact">
				<p class="contactinfo">
				Fahrenheitstraat 625 <br>
				2561 DC Den Haag<br>
				Tel: 070-3631819
				</p>				
			</div>

			<div class="gridItem8 social">
				<div class="sociallinks">
					<i class="fab fa-twitter-square"></i>
					<i class="fab fa-facebook-square"></i>

				
				</div>
			</div>
		</div>
		<script type="text/javascript" src="scripts/main.js"></script>
	</body>
</html>

将菜单中的幻灯片更改为水平菜单栏

0 个答案: