个人中心
gpt4 book ai didi

css - 我不知道为什么我的 `max-width: 470px` 媒体查询不起作用

转载 作者：行者123 更新时间：2023-11-27 23:52:52 26 4
gpt4 key购买 nike

我不知道如何让它工作。我一直在努力使一些东西更具体，而另一些则更笼统，但它没有用。

请检查我的代码，非常感谢任何建议或帮助(它不允许我发布它，因为它主要是代码，所以我只是要写字母)kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

<!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;
  }
}

我希望媒体查询在将我的屏幕设置为 470 像素或更小时起作用，但它并没有起作用

最佳答案

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

关于css - 我不知道为什么我的 `max-width: 470px` 媒体查询不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56419320/

26 4 0
文章推荐： jquery - 下拉菜单 CSS 或 jQuery
文章推荐： html - 使用 flex-direction : column results in huge gap in between the two flex children?
文章推荐： html - 如何在 Liquid 模板中声明换行符变量？
文章推荐： jquery - 使用 jQuery 从 HTML 元素名称中获取键
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com