html - css 中的媒体查询不起作用

Question

我在索引页面上实现媒体查询时遇到了一些问题。

当我在浏览器中调整页面大小时，即使在不同的媒体查询中指定了移动版和桌面版，我仍然会看到它们。

我的移动版本似乎也没有任何样式:/

这里有人看到我的错了吗？

@charset "utf-8";

@font-face {
    font-family: sinhala;
    src: url(fonts/Sinhala.ttc);
}

*{
	padding: 0%;
	margin: 0%;
	box-sizing: border-box;
	
}





*//

Index desktop

*//

@media only screen and (min-width: 751px){

#content {
	width:100%;
	position:relative;
	float:left;

}

#wrapper {
	width: 100%;
	position: relative;
	float:left;
}

#background {
	width: 100%;
	position: relative;
	float:left;
	
}

#logo {
	width: 35%;
	position:relative;
	float:left;
	margin-left: 2.5%;
	margin-top: -55% ; 

}

#button {
	width: 20%;
	position:relative;
	float:left;
	margin-top: -27%;
	margin-left: 40%;

}

#buttonhover {
	width: 20%;
	position:relative;
	float:left;
	margin-top: -27%;
	margin-left: 40%;
	display:none;
	
}

#welkom {
	width: 10%;
	position:relative;
	float:left;
	margin-top: -23%;
	margin-left: 44.5%;
}

}
*//

Index mobile

*//

@media only screen and (max-width: 750px) {

body {
	background: none;
	width: 100%;
	height: auto;
}

#contentmobile {
	width: 95%;
	height:auto;
	margin-top:2.5%;
	margin-left: 2.5%;
	position:relative;
	float:left;
}

.backgroundmobile {
	width: 100%;
	
	position: relative;
	float:left;
	
}

#background1mobile{
	background-image: url(images/background.png);
	background-size: cover;
	width: 100%;
	height: 715px;
	position:relative;
	float:left;
}

#logomobile {
	width: 55%;
	margin-left: 1.5%;
	margin-top: 1.5%;
	position:relative;
	float:left;
}

#maillogomobile {
	width: 100%;
	position:relative;
	float:left;
}

#maillinkmobile {
	width: 10%;
	float: left;
	position:relative;
	margin-top: 4%;
	margin-left: 30%;
}

#text1mobile {
	width: 55%;
	position:relative;
	float: left;
	margin-left: 22.5%;
	margin-top:42.5%;
}

#trianglemobile {
	width: 20%;
	float:left;
	position:relative;
	margin-top: 103%;
	margin-left: -40%;
}

#klikhiermobile {
	width: 100%;
	float:left;
	position:relative;
}
	

#klikhierlinkmobile {
	width:35%;
	float:left;
	position:relative;
	margin-top: 15%;
	margin-left: 30.5%;
}

#background2mobile {
	width: 100%;
	height: 630px;
	margin-top: 10px;
	background-color: #E6E5E5;

}

#text2mobile {
	width:60%;
	margin-left: 20%;
	position:relative;
	float: left;
	margin-top: 4%;
}

#text3mobile {
	width: 65%;
	margin-left: 17.5%;
	position: relative;
	float: left;
	margin-top: 8%;
}

#ipadlogomobile{
	width: 20%;
	margin-left: 5%;
	position: relative;
	float: left;
	margin-top: 16%;
}

#gsmlogomobile {
	width: 12.25%;
	margin-left: 17.5%;
	position: relative;
	float: left;
	margin-top: 16%;
	}

#desktoplogomobile {
	width: 25%;
	margin-left: 15%;
	position: relative;
	float: left;
	margin-top: 16%;
	}

#text4mobile {
	width: 70%;
	margin-left: 15%;
	position: relative;
	float:left;
	margin-top: 5%;
}

#background3mobile {
	width: 100%;
	height: 900px;
	margin-top:10px;
	background-color: #CC0000;
}

#text5mobile {
	width: 45%;
	margin-left: 27.5%;
	margin-top:8%;
	float:left;
	position:relative;
}

#text6mobile {
	width: 90%;
	margin-left: 5%;
	float:left;
	position:relative;
	margin-top: 12% ;
}

#text7mobile {
	width: 90%;
	margin-left: 5%;
	margin-top: 100%;
	position:relative;
	float:left;
}

#formmobile {
		width: 80%;
		height: 30vw;
		float:left;
		position: relative;
		margin-top: 3vw;
		margin-left: 10%;
		display: block;
		letter-spacing: 2px;
		font-family: sinhala;
}

#formmobile input  {
	width:100%;
	height: 1vw;
	background-color:#ffffff;
	border:1px solid black;
	padding:5%;
	margin-top:0.5%;
	font-size:4vw;
	color:#3a3a3a;
	border-radius: 3px 3px 3px 3px;
	font-family: sinhala;
	background: #ffffff;
}

#formmobile textarea {
	width:100%;
	height:30vw;
	background-color: #ffffff;
	background:#ffffff;
	border:1px solid black;
	padding:5%;
	margin-top:2px;
	font-size:4vw;
	color:#3a3a3a;
	border-radius: 3px 3px 3px 3px;
	font-family: sinhala;
	
}

#buttoncontactmobile {
	width: 50%;
	margin-left: 25%;
	margin-top: 5%;
	height: 8vw;
	border:1px solid black;
	font-family: sinhala;
	font-size: 4vw;
	background-color: #ffffff;
	border-radius: 3px 3px 3px 3px;
	opacity: 0.7;
	letter-spacing: 2px;
}

}

<!DOCTYPE HTML>
<html lang="en">

<head>
<title> Pieter's Web Design </title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
<div id="content">

	<div id="wrapper">
		<img id="background" src="images/background.png" />
		<img id="logo" src="images/logo.png" />
		<img id="button" src="images/button.png" />
		<a id="buttonlink" href="homepage.html"><img id="buttonhover" src="images/buttoncopy.png" /></a>
		<a id="welkomlink" href="homepage.html"><img id="welkom" src="images/welkom.png" />	</a>


	</div>
</div>


<div id="contentmobile">


		<div class="backgroundmobile" id="background1mobile">
			<img id="logomobile" src="imagesmobile/logo.png" />
				<a id="maillinkmobile" href="#" onclick=""><img id="maillogomobile" src="imagesmobile/emaillogo.png" /></a>
					<img id="text1mobile" src="imagesmobile/H1.png" />
						<img id="trianglemobile" src="imagesmobile/triangle.png" />
							<a id="klikhierlinkmobile" href="#" onclick=""><img id="klikhiermobile" src="imagesmobile/klikhier.png" /></a>

			<div id="empty_divmobile">
			</div>

		</div>

		<div class="backgroundmobile" id="background2mobile">
			<img id="text2mobile" src="imagesmobile/H2.png" />
			<img id="text3mobile" src="imagesmobile/text3.png" />
			<img id="ipadlogomobile" src="imagesmobile/ipadlogo.png" />
			<img id="gsmlogomobile" src="imagesmobile/gsmlogo.png" />
			<img id="desktoplogomobile" src="imagesmobile/desktoplogo.png" />
			<img id="text4mobile" src="imagesmobile/text4.png" />
		</div>

		<div class="backgroundmobile" id="background3mobile">
		<img id="text5mobile" src="imagesmobile/text5.png" />
		<img id="text6mobile" src="imagesmobile/text6.png" />

		<form id="formmobile" action="php/send.php" method="POST">
        
			<label>Naam</label>
				<input name="Naam" placeholder="Typ hier">
				<br />
				<br />
            
			<label>Email</label>
				<input name="Email" type="Email" placeholder="Typ hier">
				
				<br />
				<br />
				
			<label>Telefoon</label>
				<input name="Telefoon" type="Telefoon" placeholder="Typ hier">
				
				<br />
				<br />
            
			<label>Bericht</label>
				<textarea name="Bericht" placeholder="Typ hier"></textarea>
				
			<button id="buttoncontactmobile" name="Verstuur" value="Verstuur" type="Submit" form="form">Verstuur</button>
			
            </form>

		<img id="text7mobile" src="imagesmobile/text7.png" />

		</div>


</div>



<script src="js/jquery-3.1.0.js"></script>
<script src="js/hover.js"></script>
<script src="js/scrolldown.js"></script>
</body>

</body>




</html>

Answer 1

这是一个根据每个媒体查询隐藏/显示每个 div 的示例。

我添加了这两条规则，每个查询一个

#contentmobile {
    display: none;
}

#content {
    display: none;
}

此外，*// 字符会扰乱您的 CSS，请改用 /* comment */

@charset "utf-8";

@font-face {
    font-family: sinhala;
    src: url(fonts/Sinhala.ttc);
}

*{
	padding: 0%;
	margin: 0%;
	box-sizing: border-box;
	
}





/* Index desktop */


@media only screen and (min-width: 751px){

#contentmobile {
    display: none;
}

#content {
	width:100%;
	position:relative;
	float:left;

}

#wrapper {
	width: 100%;
	position: relative;
	float:left;
}

#background {
	width: 100%;
	position: relative;
	float:left;
	
}

#logo {
	width: 35%;
	position:relative;
	float:left;
	margin-left: 2.5%;
	margin-top: -55% ; 

}

#button {
	width: 20%;
	position:relative;
	float:left;
	margin-top: -27%;
	margin-left: 40%;

}

#buttonhover {
	width: 20%;
	position:relative;
	float:left;
	margin-top: -27%;
	margin-left: 40%;
	display:none;
	
}

#welkom {
	width: 10%;
	position:relative;
	float:left;
	margin-top: -23%;
	margin-left: 44.5%;
}

}
/*

Index mobile

*/

@media only screen and (max-width: 750px) {

#content {
    display: none;
}    

body {
	background: none;
	width: 100%;
	height: auto;
}

  
#contentmobile {
	width: 95%;
	height:auto;
	margin-top:2.5%;
	margin-left: 2.5%;
	position:relative;
	float:left;
}

.backgroundmobile {
	width: 100%;
	
	position: relative;
	float:left;
	
}

#background1mobile{
	background-image: url(images/background.png);
	background-size: cover;
	width: 100%;
	height: 715px;
	position:relative;
	float:left;
}

#logomobile {
	width: 55%;
	margin-left: 1.5%;
	margin-top: 1.5%;
	position:relative;
	float:left;
}

#maillogomobile {
	width: 100%;
	position:relative;
	float:left;
}

#maillinkmobile {
	width: 10%;
	float: left;
	position:relative;
	margin-top: 4%;
	margin-left: 30%;
}

#text1mobile {
	width: 55%;
	position:relative;
	float: left;
	margin-left: 22.5%;
	margin-top:42.5%;
}

#trianglemobile {
	width: 20%;
	float:left;
	position:relative;
	margin-top: 103%;
	margin-left: -40%;
}

#klikhiermobile {
	width: 100%;
	float:left;
	position:relative;
}
	

#klikhierlinkmobile {
	width:35%;
	float:left;
	position:relative;
	margin-top: 15%;
	margin-left: 30.5%;
}

#background2mobile {
	width: 100%;
	height: 630px;
	margin-top: 10px;
	background-color: #E6E5E5;

}

#text2mobile {
	width:60%;
	margin-left: 20%;
	position:relative;
	float: left;
	margin-top: 4%;
}

#text3mobile {
	width: 65%;
	margin-left: 17.5%;
	position: relative;
	float: left;
	margin-top: 8%;
}

#ipadlogomobile{
	width: 20%;
	margin-left: 5%;
	position: relative;
	float: left;
	margin-top: 16%;
}

#gsmlogomobile {
	width: 12.25%;
	margin-left: 17.5%;
	position: relative;
	float: left;
	margin-top: 16%;
	}

#desktoplogomobile {
	width: 25%;
	margin-left: 15%;
	position: relative;
	float: left;
	margin-top: 16%;
	}

#text4mobile {
	width: 70%;
	margin-left: 15%;
	position: relative;
	float:left;
	margin-top: 5%;
}

#background3mobile {
	width: 100%;
	height: 900px;
	margin-top:10px;
	background-color: #CC0000;
}

#text5mobile {
	width: 45%;
	margin-left: 27.5%;
	margin-top:8%;
	float:left;
	position:relative;
}

#text6mobile {
	width: 90%;
	margin-left: 5%;
	float:left;
	position:relative;
	margin-top: 12% ;
}

#text7mobile {
	width: 90%;
	margin-left: 5%;
	margin-top: 100%;
	position:relative;
	float:left;
}

#formmobile {
		width: 80%;
		height: 30vw;
		float:left;
		position: relative;
		margin-top: 3vw;
		margin-left: 10%;
		display: block;
		letter-spacing: 2px;
		font-family: sinhala;
}

#formmobile input  {
	width:100%;
	height: 1vw;
	background-color:#ffffff;
	border:1px solid black;
	padding:5%;
	margin-top:0.5%;
	font-size:4vw;
	color:#3a3a3a;
	border-radius: 3px 3px 3px 3px;
	font-family: sinhala;
	background: #ffffff;
}

#formmobile textarea {
	width:100%;
	height:30vw;
	background-color: #ffffff;
	background:#ffffff;
	border:1px solid black;
	padding:5%;
	margin-top:2px;
	font-size:4vw;
	color:#3a3a3a;
	border-radius: 3px 3px 3px 3px;
	font-family: sinhala;
	
}

#buttoncontactmobile {
	width: 50%;
	margin-left: 25%;
	margin-top: 5%;
	height: 8vw;
	border:1px solid black;
	font-family: sinhala;
	font-size: 4vw;
	background-color: #ffffff;
	border-radius: 3px 3px 3px 3px;
	opacity: 0.7;
	letter-spacing: 2px;
}

}

<!DOCTYPE HTML>
<html lang="en">

<head>
<title> Pieter's Web Design </title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
<div id="content">

	<div id="wrapper">
		<img id="background" src="images/background.png" />
		<img id="logo" src="images/logo.png" />
		<img id="button" src="images/button.png" />
		<a id="buttonlink" href="homepage.html"><img id="buttonhover" src="images/buttoncopy.png" /></a>
		<a id="welkomlink" href="homepage.html"><img id="welkom" src="images/welkom.png" />	</a>


	</div>
</div>


<div id="contentmobile">


		<div class="backgroundmobile" id="background1mobile">
			<img id="logomobile" src="imagesmobile/logo.png" />
				<a id="maillinkmobile" href="#" onclick=""><img id="maillogomobile" src="imagesmobile/emaillogo.png" /></a>
					<img id="text1mobile" src="imagesmobile/H1.png" />
						<img id="trianglemobile" src="imagesmobile/triangle.png" />
							<a id="klikhierlinkmobile" href="#" onclick=""><img id="klikhiermobile" src="imagesmobile/klikhier.png" /></a>

			<div id="empty_divmobile">
			</div>

		</div>

		<div class="backgroundmobile" id="background2mobile">
			<img id="text2mobile" src="imagesmobile/H2.png" />
			<img id="text3mobile" src="imagesmobile/text3.png" />
			<img id="ipadlogomobile" src="imagesmobile/ipadlogo.png" />
			<img id="gsmlogomobile" src="imagesmobile/gsmlogo.png" />
			<img id="desktoplogomobile" src="imagesmobile/desktoplogo.png" />
			<img id="text4mobile" src="imagesmobile/text4.png" />
		</div>

		<div class="backgroundmobile" id="background3mobile">
		<img id="text5mobile" src="imagesmobile/text5.png" />
		<img id="text6mobile" src="imagesmobile/text6.png" />

		<form id="formmobile" action="php/send.php" method="POST">
        
			<label>Naam</label>
				<input name="Naam" placeholder="Typ hier">
				<br />
				<br />
            
			<label>Email</label>
				<input name="Email" type="Email" placeholder="Typ hier">
				
				<br />
				<br />
				
			<label>Telefoon</label>
				<input name="Telefoon" type="Telefoon" placeholder="Typ hier">
				
				<br />
				<br />
            
			<label>Bericht</label>
				<textarea name="Bericht" placeholder="Typ hier"></textarea>
				
			<button id="buttoncontactmobile" name="Verstuur" value="Verstuur" type="Submit" form="form">Verstuur</button>
			
            </form>

		<img id="text7mobile" src="imagesmobile/text7.png" />

		</div>


</div>



<script src="js/jquery-3.1.0.js"></script>
<script src="js/hover.js"></script>
<script src="js/scrolldown.js"></script>
</body>

</body>




</html>