【发布时间】：2023-04-05 08:25:01
【问题描述】：
我正在完成一个项目，我正在添加媒体查询以使其跨设备响应，但由于某种原因，当我在媒体查询中指定新样式时，我的网站上没有任何变化。我想我一定在某个地方犯了语义错误，但无论我怎么看，我都找不到。请看一下我的代码，看看你是否能找出这个问题的根源。
/* Media Queries */
/* Laptop */
@media screen and (max-width="1024px"){
/* navigation menu */
nav{
display: flex;
background: url(img/cac.png), rgba(44, 199, 101, 0.7) ;
background-blend-mode: multiply;
background-position: center;
padding:1% 0;
position: fixed;
top:0px;
width: 98.7%;
margin-top: -1%;
margin-left: -0.5%;
padding-top: 2%;
}
nav #header-img{
border-radius: 1%;
height: 5rem;
margin-left: 1%;
}
nav ul /*Flex Container*/{
list-style-type:none;
display: flex;
justify-content: space-evenly;
flex-grow: 1;
flex-shrink: 1;
font-weight: 600;
align-items: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
z-index: 5;
}
nav .nav-link a{
padding: 0.5rem 3rem;
text-decoration: none;
color: white;
font-size: 1.2rem;
}
/* End navigation menu */
/* Title Section */
.title-wrapper #title-section{
background-color: rgb(131, 197, 190, 0.5);
width: 100%;
height: 18rem;
}
.title-wrapper h1{
text-align: center;
margin-top: 0.7%;
padding-top: 3%;
font-size: 3rem;
font-family: 'Homemade Apple', cursive;
letter-spacing: 0.2rem;
font-weight: 500;
}
.title-wrapper p{
text-align: center;
font-size: 1.3rem;
font-family: 'Raleway', sans-serif;
margin-top: -1%;
padding: 1% 1%;
}
/* End Title Section */
}
/* End Laptop */
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="keywords" content="cactus, laos, luang prabang">
<meta name="description" content="Company website of Cactus Connoiseur">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cactus Connoiseur</title>
</head>
<body>
<!-- navigation menu -->
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<img id="header-img" src="img/logo.png" alt="company logo">
<ul class="nav-link" href="#product-section" id="nav-opt">
<li><a class="nav-link" href="#product-section">Products</a></li>
<li><a class="nav-link" href="#about-section">About</a></li>
<li><a class="nav-link" href="#order-section">Order</a></li>
<li><a class="nav-link" href="#news-section">Newsletter</a></li>
</ul>
<ul class="social">
<li><a id="fb" target="_blank" href="https://www.facebook.com/Cute-Cactus-luang-prabang-%E0%BA%81%E0%BA%B0%E0%BA%9A%E0%BA%AD%E0%BA%87%E0%BB%80%E0%BA%9E%E0%BA%B1%E0%BA%94%E0%BA%AE%E0%BA%B1%E0%BA%81-%E0%BA%AB%E0%BA%A5%E0%BA%A7%E0%BA%87%E0%BA%9E%E0%BA%B0%E0%BA%9A%E0%BA%B2%E0%BA%87-102988821417064"><img src="img/fb.png" alt="Facebook Logo"></a></li>
<li><a id="ig" href="#"><img src="img/icons8-instagram-48.png" alt="Instagram Logo"></a></li>
</ul>
</nav>
</header>
</div>
<!-- End navigation menu -->
<!-- Title Section -->
<div class="title-wrapper">
<section id="title-section">
<h1>Cactus Connoisseur</h2>
<p>
We curate and grow the most exquisite species of cactuses known to man for the pleasure of the sophisticated cactus connoisseur.
</p>
</section>
</div>
<!-- End Title Section -->
<!-- product Section -->
<div class="product-wrapper">
<h2>Products</h2>
<section id="product-section">
<img src="img/c1.png" alt="cactus">
<!-- <p id="p1">Marjoram</p> -->
<img src="img/c2.png" alt="cactus">
<!-- <p id="p2">Alyssum</p> -->
<img src="img/c3.png" alt="cactus">
<!-- <p id="p3"> Gladiola</p> -->
</section>
<div class="plant-names">
<p id="marjoram">Marjoram</p>
<p id="alyssum">Alyssum</p>
<p id="gladiola"> Gladiola</p>
</div>
<a href="#order-section" id="order-bttn">Order Now</a>
</div>
<!-- End product Section -->
<!-- About Section -->
<div class="about-wrapper">
<section id="about-section">
<h2>About</h2>
<div id="vid-wrapper">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/8na6R9N3-vQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, aliquam saepe nostrum ab dolorum iure nihil ratione quas doloribus quos itaque, officia perspiciatis ea labore adipisci? Illo cupiditate voluptatum nobis?
<br>
<br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, obcaecati? Itaque exercitationem harum quaerat beatae omnis nam amet laudantium hic. Illo quae necessitatibus eos fugiat facere iure quos enim nesciunt.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
<br>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nemo, quasi aliquam quia tenetur neque commodi! Optio, dolores exercitationem. Ad minima nihil officiis est. Aliquam, porro recusandae. Consectetur, quisquam praesentium.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nemo, quasi aliquam quia tenetur neque commodi! Optio, dolores exercitationem. Ad minima nihil officiis est. Aliquam, porro recusandae. Consectetur, quisquam praesentium.
</p>
</div>
</section>
</div>
<!-- End About Section -->
<!-- Order Section -->
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<table id="tableleft">
<tr>
<td><label for="prodname" class="order-box">Product Name:</label></td>
<td> <input id="prodname" placeholder="Product name"> </td>
</tr>
<tr>
<td><label class="order-box">First Name:</label></td>
<td> <input placeholder="First name"> </td>
</tr>
<tr>
<td><label class="order-box">Email:</label></td>
<td> <input placeholder="Email"> </td>
</tr>
<tr>
<td><label class="order-box">Street Address:</label></td>
<td> <input placeholder="Address"> </td>
</tr>
</table>
<table id="tableright">
<tr>
<td><label class="order-box">Quantity:</label></td>
<td> <input placeholder="Quantity"> </td>
</tr>
<tr>
<td><label class="order-box">Last Name:</label></td>
<td> <input placeholder="Last name"> </td>
</tr>
<tr>
<td><label class="order-box">Phone Number:</label></td>
<td> <input placeholder="Phone number"> </td>
</tr>
</table>
<input id="placeorderbttn" type="submit" value="Place Order">
</form>
</section>
</div>
<!-- End Order Section -->
<!-- Newsletter Section -->
<div class="news-wrapper">
<section id="news-section">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label><h2>Sign up for our weekly news letter!</h2> <br> We will send you promotions and updates <br> about rare and limited stock so you can be first!</label>
<input id="email" name="email" type="email" placeholder="Type your email here.">
<input id="submit" type="submit" value="Sign Up!" >
</form>
</section>
</div>
<!-- End Newsletter Section -->
<footer id="contact-section">
</footer>
</div>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>
【问题讨论】：
标签： html css media-queries