Question

我不知道该如何工作。我一直在尝试使某些东西更具体一些，而另一些更笼统，但仍然行不通。

请检查我的代码，非常感谢任何建议或帮助（这不是让我发布它的原因，因为它主要是代码，所以我要放个字母） kkkkkkkkkkk kkkkkkkkkkk kkkkkkkkkkk

<!DOCTYPE html>
<html>
  <head>
    <title>Secret Agent Supply Inc.</title>
    <link type="text/css" rel="stylesheet" href="./resources/reset.css">
    <link type="text/css" rel="stylesheet" href="./resources/style.css">
  </head>
  <body>
    <div class="company background-black">
      <div class="nine-w container">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/logo.png">
        <span>SECRET AGENT SUPPLY INC.</span>
      </div>
    </div>

    <div class="banner">
      <div class="nine-w">
        <div class="banner-content background-black">
          <h2>NEW ARRIVAL</h2>
          <h1>SPORT BIKES AND MOTORCYCLES</h1>
        </div>
      </div>
    </div>

    <nav>
      <div class="nine-w">
        <ul class="desktop">
          <li>Eyewear</li>
          <li>Apparel</li>
          <li>Gadgets</li>
          <li>Vehicles</li>
          <li>Classes</li>
          <li>Contact</li>
        </ul>

        <ul class="mobile">
          <li>Menu</li>
        </ul>
      </div>
    </nav>

    <div class="content">
      <div class="images nine-w">
        <div class="image-item">
          <div class="image-div">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/pen.png">
          </div>
          <span class="background-black">Exploding Pen</span>
        </div>

        <div class="image-item">
          <div class="image-div">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/watch.png">
          </div>
          <span class="background-black">Cellular Watch</span>
        </div>

        <div class="image-item hide">
          <div class="image-div">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/glasses.png">
          </div>
          <span class="background-black">Thermal Glasses</span>
        </div>
      </div>

      <div class="below nine-w">
        <div class="below-images">
          <span class="background-black">Location</span>
          <p>-47.346436, 84.32354</p>
        </div>

        <div class="below-images">
          <span class="background-black">Location</span>
          <p>0800 - 1800</p>
        </div>
      </div>
    </div>

    <footer class="background-black">
      <div class="nine-w">Copyright Secret Agent Supply Inc.</div>
    </footer>
  </body>
</html>

CSS

html{
  font-size: 18px;
  color: white;
  font-family: Helvetica;
}

.nine-w{
  max-width: 960px;
  margin: 0 auto;
}

.background-black{
  background-color: black;
}

 .company .nine-w{
    display: flex;
    align-items: center;
    padding: 0.66rem 0;
 }

.company img{
  height: 1.5rem;
  padding: 0 1rem 0 0;
}

.company span{
  font-size: 1rem;
}

.banner{
  height: 25rem;
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/moto.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.banner-content{
  max-width: 20rem;
  padding: 2rem 3rem;
  position: relative;
  top: 9rem;
}

h2{
    font-size: 1rem;
    font-weight: bold;
    padding-bottom: 0.25rem;
}

h1{
  font-weight: bold;
  font-size: 2rem;
}

nav{
    background-color: firebrick;
}

nav ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: firebrick;
  padding: 0.75rem 0;
}

.images{
    display: flex;
    justify-content: space-between;

}

.image-item{
  width: 30%;
  display: flex;
  flex-direction: column;
  border: 4px solid black;
  margin-top: 3rem;
}

.image-div{
    height: 9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.image-item img{
  max-width: 8rem;
}
.image-item span{
  display: block;
  text-align: center;
  padding: 0.5rem 0;
}

.below{
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
}

.below-images{
  width: 35%;
  margin-bottom: 4rem;
}

.below-images span{
  display: block;
  padding: 1rem 0 1rem 2rem;
}

.below-images p{
  color: black;
}

footer{
  padding: 5rem 0;
}

.mobile{
  display: none;
}

@media only screen and (max-width: 470px){
  .banner-content h2{
    font-size: 0.77rem;
  }

  .banner-content h1{
    font-size: 1rem;
  }

  .banner-content{
    padding: 1rem 2rem;
    top: 10rem;
  }

  .banner{
    height: 15rem;
  }
}

@media only screen and (max-width: 1024px){
  .hide{
    display: none;
  }

  .image-item{
    width: 47%;
  }

  .desktop{
    display: none;
  }

  .mobile{
    display: block;
    text-align: center;
  }

  .banner-content h1{
    font-size: 1.5rem;
  }
}

我希望屏幕尺寸为470px或更小时，媒体查询才能正常工作，但不是

Answer 1

您的媒体查询顺序错误-只需颠倒顺序即可：max-width: 470px应该在之后 max-width: 1024px。您现在拥有它们的方式，第二个将覆盖第一个，因为小于470像素的宽度也小于1024像素。

Answer 2

您的代码运行正常。在此示例中，我将横幅内容的背景色设置为红色。如果您的视口宽度小于470像素，它将起作用；

.banner-content{
    padding: 1rem 2rem;
    top: 10rem;
    background: red
}

https://codepen.io/seyyedmojtaba72/pen/QRYEjd

我不知道为什么我的`max-width：470px`媒体查询无法正常工作

2 个答案: