css 中的媒体查询不工作

Media query in css not working

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

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

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

有人看出我的错了吗？

@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>

这是一个示例，其中 hides/shows 每个 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>