缩小浏览器宽度时媒体查询不起作用？答案

【问题标题】：Media Queries not working when Browser width is Reduced?缩小浏览器宽度时媒体查询不起作用？
【发布时间】：2018-07-07 18:32:06
【问题描述】：

我有一个奇怪的问题。当我在智能手机中查看我的网站时，即使我在谷歌浏览器的检查模式下查看它，我的网站也会响应，但是当我减小浏览器的大小时，媒体查询不起作用。当我进入谷歌浏览器的检查模式并指定我需要测试的宽度时，媒体查询工作得很好，但是当我减小浏览器的大小时，一切都搞砸了。

*{
  margin: 0;
  padding: 0;
}

.hero{
  width: 100%;
  height: 100vh;
  background: url("../images/creative.png") no-repeat center center fixed;
  background-size: cover;
  -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s;
}

#menu{
  width: 100%;
  height: 10vh;
  background-color: #ecc7c0;
  -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s;
}

#ctabutton{
  padding: 10px;
    border: solid 1px skyblue; 
  background-color: #8bcbc8;
  color: #fff;
  font-family: 'Julius Sans One', sans-serif;
  font-weight: bold;
  font-size: 1.9em;
  float: right;
  width: 45%;
  height: 5vh;
  margin-top: 2.5vh;
  margin-right: 1em;
}

#hamburger{
  float: left;
  width: 15%;
  height: 5vh;
  margin-top: 2.5vh;
  text-align : center;
  color: #000;
  font-size: 2.2em;
}

#hamburgerm{
  height: 2.5vh;
  margin-top: 1.25vh;
}

#hamburgerx{
  height: 2.5vh;
  margin-top: 1.25vh;
  display: none;
}

#header{
  font-family: 'Julius Sans One', sans-serif;
  color: #fff;
    font-size: 4em;
  line-height: 3.1em;
  width: 100%;
  margin: 0 auto;
  margin-top: 2.5vh;
}

#portfolio{
  padding: 15px;
    border: solid 1px skyblue; 
  background-color: #8bcbc8;
  color: #fff;
  font-family: 'Lora', serif;
  margin: auto;
  display: block;
  font-size: 0.8em;
  margin-top: 4em;
}

#navigation{
  display: none;
  margin-top: 2em;
  width: 20em;
  margin-left: 85%;
  list-style: none;
}

#navigation a {
  text-decoration: none;
  color: #fff;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
}
header{
  text-align: center;
}
#porthead{
  width: 100%;
  font-family: 'Julius Sans One', sans-serif;
  margin-top: 50px;
}
#portsub{
  margin-top: 25px;
  font-family: 'Julius Sans One', sans-serif;
}

.row1{
  width: 100%;
  height: 45vh;
  background-color: #000;
  margin-top: 45px;
  background: url("../images/design.jpeg") no-repeat center center fixed;
}

.row2{
  width: 100%;
  height: 45vh;
  background-color: #000;
  margin-top: 45px;
  background: url("../images/logo.jpeg") no-repeat center center fixed;
}



@media only screen and (min-width: 576px){
  #header{
    font-size: 2.5em;
  }
    #navigation a {
    font-size: 1.5em;
    }
    .row1{
    height: 55vh;
  }
  .row2{
    height: 55vh;
  }
}

@media only screen and (min-width: 768px){
  #header{
    font-size: 3em;
  }
  #ctabutton{
    font-size: 1.4em;
  }
    #navigation a {
    font-size: 1em;
    }
  #portfolio{
  margin: auto;
  display: block;
  font-size: 0.8em;
  margin-top: 2em;
    }
}

@media only screen and (min-width: 992px){
  #header{
    font-size: 2.5em;
  }
  #ctabutton{
    font-size: 1em;
    width: 35%;
  }
}

@media only screen and (min-width: 1200px){
  #header{
    font-size: 2.5em;
  }
  #ctabutton{
    font-size: 1em;
    width: 35%;
  }
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Mukesh Rani | Creative Web Developer</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
  <div class="hero" id="hg">
      <section id= "menu">
        <section id="hamburger">
          <i id="hamburgerm" class="fas fa-bars"></i>
        <i id="hamburgerx" class="fas fa-times"></i>
        <ul id="navigation">
          <li><a href="#">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact Me</a></li>
          <li><a href="#">My Story</a></li>
        </ul>				
      </section>
        <section id="cta">
          <button id="ctabutton">Ready to Work with Me</button>
      </section>
    </section>

    <section id= "header">
       <strong> Hi, I am Mukesh
      A Creative, Passionate and Experienced
      Web Designer and Developer </strong>
      <button id="portfolio">Work Collection</button>
    </section>

  </div>
  <div class="portfolio">
      <header>
        <h1 id="porthead">My Work Collection</h1>
      <p id="portsub">In the past several years, I have worked with many MNC's and Startups which makes Experience my Golden Factor
    </header>
        <div class="row1">	<button id="cta1">Ready to Work with Me</button>	</div>
    <div class="row2">  <button id="cta2">Ready to Work with Me</button>    </div>
    <div class="row2">  <button id="cta3">Ready to Work with Me</button>   </div>
    <div class="row2">  <button id="cta4">Ready to Work with Me</button>  </div>
  </div>
  <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

【问题讨论】：

标签： css html

【解决方案1】：

我认为您的问题出在@media only screen and (min-width:....) 中，导致查询减少后无法正常工作。尝试换成(max-width: 576px)等看看效果如何

【讨论】：

这是不正确的。他不应该混。如果他使用的是移动优先，他应该坚持这一点，并首先为尽可能小的屏幕创建查询。
是的，你说得对。他需要一些断点，我只是认为他问的是问题所在

【解决方案2】：

您的媒体查询是屏幕宽度/高度达到阈值时触发的断点。这些值之间不能总是得到保证。如果您注意到两个媒体查询之间的元素大小不合适，只需在元素中断的值处创建另一个媒体查询。

您使用的是移动优先方法，因此了解您的样式从小到大很重要，并且尝试向后编写规则可能会有点困难。因此，从您需要设计的最小屏幕开始，然后逐步向上。

这里有一个很好的megathread as well，说明您为什么使用@media only screen。

您在正确的轨道上，您可能只需要创建更多断点才能在所有屏幕上看到统一的结果。

【讨论】：