Question

我有一个奇怪的问题。当我在智能手机中查看我的网站时，即使我在谷歌浏览器的检查模式下查看它，它也会响应，但是当我减小浏览器的大小时，媒体查询不起作用。当我去检查Google chrome模式并指定需要测试的宽度时，媒体查询可以完美地工作，但是当我减小浏览器的大小时，一切都变得混乱了。

*{
  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>

Answer 1

我认为您的问题出在@media only screen and (min-width:....)上，导致查询量减少之后，该查询不起作用。尝试改成(max-width: 576px)等，然后看看效果如何

Answer 2

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

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

关于使用<input type="submit" value="Submit" name="Submit">的原因，megathread as well很不错。

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

减小浏览器宽度时，媒体查询不起作用？

2 个答案: