我不知道该如何工作。我一直在尝试使某些内容更具体，而另一些内容更笼统，但仍然行不通。
请检查我的代码，非常感谢任何建议或帮助
（这不是让我发布它的原因，因为它主要是代码，所以我要放个字母）
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时媒体查询能够正常工作，但不是
最佳答案
您的媒体查询顺序错误-只需颠倒顺序：max-width: 470px应该在max-width: 1024px之后。您现在拥有它们的方式，第二个将覆盖第一个，因为小于470px的宽度也小于1024px的宽度。