我的媒体查询不会按预期更改我的响应式样式
My media query will not change my responsive styling as intended
我正在尝试针对手机和平板电脑等小型设备的响应能力进行媒体查询。我不确定为什么，但我的媒体查询不会在它应该（或根本不会）触发时触发。它应该在最大宽度为 500px 时触发。
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&display=swap');
:root {
--gray: #6e6e6e;
--author-credit: #837d7d;
--bg-color: #24252A;
--light-blue: #0088A9;
--breakfast: #B0BFB5;
--breakfast-bg: #92A699;
--lunch: #709e88;
--lunch-bg: #598e74;
--dinner: #DD1512;
/*#E21612*/
--dinner-bg: #CB1310;
/*#C01310*/
--dessert: #5E4C45;
--dessert-bg: #50413B;
scroll-behavior: smooth;
outline: none;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-color);
}
.nav-links ul li,
.nav-links ul li a,
.cta button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: wheat;
text-decoration: none;
}
.nav-links ul li {
list-style: none;
}
.nav-links li {
display: inline-block;
padding: 0 30px;
border-right: 2px solid var(--gray);
}
.nav-links li:last-child {
border-right: none;
}
.logo img {
transition: all 0.4s ease linear;
}
.logo:hover img {
width: 110%;
height: 110%;
}
.nav-links li a {
transition: 0.4s ease;
}
.nav-links li a:hover {
color: var(--light-blue);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 15%;
-webkit-box-shadow: 0 5px 5px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 5px 5px 4px rgba(0, 0, 0, 0.4);
margin-bottom: 10px;
position: sticky;
position: -webkit-sticky;
border-radius: 0 0 25px 25px;
top: 0;
background-color: var(--bg-color);
z-index: 5;
}
.cta button {
padding: 10px 20px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s ease;
outline: none;
}
.cta button:hover {
background-color: rgba(6, 118, 145, 1);
/* border-radius: 25px; */
}
.title-card {
font-family: "Poppins", sans-serif;
color: wheat;
font-weight: 400;
border-bottom: 3px solid;
margin-top: 60px;
margin-left: 15px;
margin-bottom: 75px;
padding: 0;
width: 250px;
}
.breakfast-title {
border-color: var(--breakfast);
}
.lunch-title {
border-color: var(--lunch);
}
.dinner-title {
border-color: var(--dinner);
}
.dessert-title {
border-color: var(--dessert);
}
/* ================Breakfast=============== */
.breakfast {
display: grid;
background-color: var(--breakfast-bg);
border-radius: 15px;
width: 100%;
grid-template: auto / repeat(3, 300px);
grid-gap: 20px 10px;
justify-content: space-around;
align-items: stretch;
grid-template-areas: "no1 no2 no3";
}
.breakfast a {
text-decoration: underline;
color: var(--bg-color);
transition: all 0.4s ease;
}
.breakfast a:hover {
color: var(--light-blue);
}
.b1 {
grid-area: no1;
}
.b2 {
grid-area: no2;
}
.b3 {
grid-area: no3;
}
.b-recipe {
background-color: var(--breakfast);
margin-top: 10%;
margin-bottom: 10%;
border-radius: 7px;
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}
.b-recipe h2 {
font-family: "Poppins";
font-size: 18px;
padding: 5px 10%;
color: var(--bg-color);
border-bottom: 2px solid var(--breakfast-bg);
}
.b-recipe h4 {
color: var(--author-credit);
padding: 5px 10%;
font-family: "Noto Serif", serif;
}
.b-recipe h4 a {
color: var(--author-credit);
text-decoration: none;
transition: 0.75s ease;
}
.b-recipe h4 a:hover {
color: var(--light-blue);
}
.b-recipe p {
font-family: "Poppins";
font-size: 14px;
padding: 5px 10%;
color: var(--bg-color);
}
.b-recipe img {
max-height: 52%;
max-width: 100%;
border-radius: 7px 7px 0 0;
padding: 0;
}
/* ================Lunch=============== */
.lunch {
display: grid;
background-color: var(--lunch-bg);
border-radius: 15px;
width: 100%;
grid-template: auto / repeat(3, 300px);
grid-gap: 20px 10px;
justify-content: space-around;
align-items: stretch;
grid-template-areas: "no1 no2 no3";
}
.lunch a {
text-decoration: underline;
color: var(--bg-color);
transition: all 0.4s ease;
}
.lunch a:hover {
color: var(--light-blue);
}
.l1 {
grid-area: no1;
}
.l2 {
grid-area: no2;
}
.l2 img {
width: 100%;
}
.l3 {
grid-area: no3;
}
.l-recipe {
background-color: var(--lunch);
margin-top: 10%;
margin-bottom: 10%;
border-radius: 7px;
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}
.l-recipe h2 {
font-family: "Poppins";
font-size: 18px;
padding: 5px 10%;
color: var(--bg-color);
border-bottom: 2px solid var(--lunch-bg);
}
.l-recipe h4 {
color: var(--author-credit);
padding: 5px 10%;
font-family: "Noto Serif", serif;
}
.l-recipe h4 a {
color: var(--author-credit);
text-decoration: none;
transition: 0.75s ease;
}
.l-recipe h4 a:hover {
color: var(--light-blue);
}
.l-recipe p {
font-family: "Poppins";
font-size: 14px;
padding: 5px 10%;
color: var(--bg-color);
}
.l-recipe img {
max-height: 52%;
max-width: 100%;
border-radius: 7px 7px 0 0;
padding: 0;
}
/* ================ Dinner =============== */
.dinner {
display: grid;
background-color: var(--dinner-bg);
border-radius: 15px;
width: 100%;
grid-template: auto / repeat(3, 300px);
grid-gap: 20px 10px;
justify-content: space-around;
align-items: stretch;
grid-template-areas: "no1 no2 no3";
}
.dinner a {
text-decoration: underline;
color: var(--bg-color);
transition: all 0.4s ease;
}
.dinner a:hover {
color: var(--light-blue);
}
.d1 {
grid-area: no1;
}
.d1 img {
width: 100%;
}
.d2 {
grid-area: no2;
}
.d2 img {
width: 100%;
}
.d3 {
grid-area: no3;
}
.d-recipe {
background-color: var(--dinner);
margin-top: 10%;
margin-bottom: 10%;
border-radius: 7px;
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}
.d-recipe h2 {
font-family: "Poppins";
font-size: 18px;
padding: 5px 10%;
color: var(--bg-color);
border-bottom: 2px solid var(--dinner-bg);
}
.d-recipe h4 {
color: var(--author-credit);
padding: 5px 10%;
font-family: "Noto Serif", serif;
}
.d-recipe h4 a {
color: var(--author-credit);
text-decoration: none;
transition: 0.75s ease;
}
.d-recipe h4 a:hover {
color: var(--light-blue);
}
.d-recipe p {
font-family: "Poppins";
font-size: 14px;
padding: 5px 10%;
color: var(--bg-color);
}
.d-recipe img {
max-height: 52%;
max-width: 100%;
border-radius: 7px 7px 0 0;
padding: 0;
}
/* ================== Dessert ================== */
.dessert {
display: grid;
background-color: var(--dessert-bg);
border-radius: 15px;
width: 100%;
grid-template: auto / repeat(3, 300px);
grid-gap: 20px 10px;
justify-content: space-around;
align-items: stretch;
grid-template-areas: "no1 no2 no3";
}
.dessert a {
text-decoration: underline;
color: var(--bg-color);
transition: all 0.4s ease;
}
.dessert a:hover {
color: var(--light-blue);
}
.dd1 {
grid-area: no1;
}
.dd2 {
grid-area: no2;
}
.dd2 img {
width: 100%;
}
.dd3 {
grid-area: no3;
}
.dd3 img {
width: 100%;
}
.dd-recipe {
background-color: var(--dessert);
margin-top: 10%;
margin-bottom: 10%;
border-radius: 7px;
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}
.dd-recipe h2 {
font-family: "Poppins";
font-size: 18px;
padding: 5px 10%;
color: var(--bg-color);
border-bottom: 2px solid var(--dessert-bg);
}
.dd-recipe h4 {
color: var(--author-credit);
padding: 5px 10%;
font-family: "Noto Serif", serif;
}
.dd-recipe h4 a {
color: var(--author-credit);
text-decoration: none;
transition: 0.75s ease;
}
.dd-recipe h4 a:hover {
color: var(--light-blue);
}
.dd-recipe p {
font-family: "Poppins";
font-size: 14px;
padding: 5px 10%;
color: var(--bg-color);
}
.dd-recipe img {
max-height: 52%;
max-width: 100%;
border-radius: 7px 7px 0 0;
padding: 0;
}
footer {
display: flex;
box-shadow: 0 -4px 10px 10px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 -4px 10px 10px rgba(0, 0, 0, 0.4);
border-radius: 30px 30px 0 0;
height: 125px;
padding: 10px;
/* position: absolute; */
bottom: 5px;
margin-top: 75px;
/* border-top: 3px solid var(--gray); */
align-items: flex-end;
justify-content: space-between;
font-family: "Poppins";
color: var(--gray);
text-decoration: none;
}
.back-to-top-link {
text-decoration: none;
color: var(--gray);
margin-right: 10px;
transition: 0.4s ease;
}
.back-to-top-link:hover {
color: var(--light-blue);
}
.credit-link {
text-decoration: underline;
color: var(--gray);
transition: 0.4s ease;
}
.credit-link:hover {
color: var(--light-blue);
}
@media only screen and (max-width: 500px) {
.breakfast,
.lunch,
.dinner,
.dessert {
grid-template-columns: auto;
padding: 50px;
grid-template-areas: "no1" "no2" "no3";
}
.nav-links ul li a,
.cta button {
font-size: 20px;
}
footer div,
footer a {
font-size: 20px;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Recipes at Home | The best home-made recipes on the web!</title>
<link rel="icon" href="img/logo-dark.svg">
<link rel="stylesheet" href="landing.css">
</head>
<body>
<header class="nav-container">
<a href="#" class="logo"><img src="img/logo-dark.svg" alt="Home Logo"></a>
<nav class="nav-links">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
<a href="#" class="cta"><button>Contact</button></a>
</header>
<!-- ====================Breakfast================== -->
<h1 class="breakfast-title title-card" id="back-to-top">Breakfast</h1>
<section class="breakfast">
<div class="b-recipe b1">
<a href="https://www.foodnetwork.com/recipes/
ina-garten/cinnamon-baked-doughnuts-recipe-2135621" target="_blank"><img src="img/breakfast/cinnamon-baked-doughnuts.jpeg" alt="Cinnamon Baked Doughnuts"></a>
<h2>Cinnamon Baked Doughnuts</h2>
<h4>by <a href="https://www.foodnetwork.com/profiles/talent/ina-garten" target="_blank">Ina Garten</a></h4>
<p>A simple recipe for homemade (cinnamon) doughnuts. The recipe is simple and quite easy to follow. This recipe has great reviews and should make for a great morning treat!</p>
</div>
<div class="b-recipe b2">
<a href="https://www.foodnetwork.com/recipes/food-network-kitchen/
healthy-banana-bread-muffins-recipe-7217371" target="_blank"><img src="img/breakfast/healthy-banana-bread-muffins.jpeg" alt="Healthy Banana Bread Muffins"></a>
<h2>Healthy Banana Bread Muffins</h2>
<h4>by <a href="https://www.foodnetwork.com/profiles/talent/food-network-kitchen" target="_blank">Food Network Kitchen</a></h4>
<p>Another one straight from the kind people in the kitchen! This recipe will make a small batch of healthy breakfast muffins for the whole family! You won't regret making these.</p>
</div>
<div class="b-recipe b3">
<a href="https://www.foodnetwork.com/recipes/food-network-kitchen/homemade-pancake-mix-3571180" target="_blank"><img src="img/breakfast/homemade-pancake-mix.jpeg" alt="Homemade Pancake Mix"></a>
<h2>Homemade Pancake Mix</h2>
<h4>by <a href="https://www.foodnetwork.com/profiles/talent/food-network-kitchen" target="_blank">Food Network Kitchen</a></h4>
<p>A delightful recipe for your very own pancake recipe mix. This one's straight from the kitchen! You'll be loving pancakes for days after this one!</p>
</div>
</section>
<!-- =================Lunch=============== -->
<h1 class="lunch-title title-card">Lunch</h1>
<section class="lunch">
<div class="l-recipe l1">
<a href="https://www.delish.com/cooking/recipe-ideas/a26870550/ham-and-cheese-sandwich-recipe/" target="_blank">
<img src="img/lunch/ham-and-cheese-sandwich.jpg" alt="Ham and Cheese Sandwich"></a>
<h2>Ham and Cheese Sandwich</h2>
<h4>by <a href="https://www.delish.com/author/17077/lena-abraham/" target="_blank">Lena Abraham</a></h4>
<p>This is a simple ham and cheese sandwich recipe. This will probably take around 20 minutes to make, but it's worth the time! You won't want to miss out on this one!</p>
</div>
<div class="l-recipe l2">
<a href="https://www.delish.com/cooking/recipe-ideas/
a19601468/easy-pasta-salad-recipe/" target="_blank"><img src="img/lunch/italian-pasta-salad.jpg" alt="Italian Pasta Salad"></a>
<h2>Italian Pasta Salad</h2>
<h4>by <a href="https://www.delish.com/author/17846/makinze-gore/" target="_blank">Makinze Gore</a></h4>
<p>A great, italian salad for a healthy lunch! This dish has noodles, pepperonis, tomatoes, black olives, and much more. If you're feeling like italian, you'll definitely love this one!</p>
</div>
<div class="l-recipe l3">
<a href="https://www.allrecipes.com/recipe/85901/spicy-grilled-cheese-sandwich/?
internalSource=staff%20pick&referringId=17561&referringContentType=Recipe%20Hub" target="_blank"><img src="img/lunch/spicy-grilled-cheese.jpeg" alt="Spicy Grilled Cheese Sandwich"></a>
<h2>Spicy Grilled Cheese Sandwich</h2>
<h4>by <a href="https://www.allrecipes.com/cook/1415649" taget="_blank">PATELGURL</a></h4>
<p>This is a simple grilled cheese. However, it has a little bit of added spice to it! Get your butter and cheese ready and turn on the stove!</p>
</div>
</section>
<!-- =================Dinner=============== -->
<h1 class="dinner-title title-card">Dinner</h1>
<section class="dinner">
<div class="d-recipe d1">
<a href="https://www.tasteofhome.com/recipes/quick-chicken-piccata/" target="_blank">
<img src="img/dinner/chicken-piccata.jpg" alt="Chicken Piccata"></a>
<h2>Chicken Piccata</h2>
<h4>by <a href="https://www.tasteofhome.com/" target="_blank">Taste of Home</a></h4>
<p>This is a nice evening filler for all! This one may take some more time than the others, but it is definitely worth it! It's reccomended for a family.</p>
</div>
<div class="d-recipe d2">
<a href="https://www.allrecipes.com/recipe/18073/honey-wheat-sandwich-rolls/?
internalSource=recipe%20hub&referringId=17561&referringContentType=Recipe%20Hub&
clickId=cardslot%2034" target="_blank"><img src="img/dinner/honey-wheat-rolls.jpeg" alt="Honey Wheat Sandwich Rolls"></a>
<h2>Honey Wheat Sandwhich Rolls</h2>
<h4>by <a href="https://www.allrecipes.com/cook/50535" target="_blank">SEEFREE</a></h4>
<p>This is a simple but elegant honey wheat roll recipe. It has a sweat, warm flavor to it while maintaining the softness of a good roll. These are good for an apetizer.</p>
</div>
<div class="d-recipe d3">
<a href="https://www.allrecipes.com/recipe/264440/traditional-spaghetti-allamatriciana/?internalSource=staff%20pick&
referringId=723&referringContentType=Recipe%20Hub&clickId=cardslot%203" target="_blank"><img src="img/dinner/traditional-spaghetti.jpeg" alt="Traditional Spaghetti all'Amatriciana"></a>
<h2>Traditional Spaghetti all'Amatriciana</h2>
<h4>by <a href="https://www.allrecipes.com/cook/Aldo%C2%BBAldo" target="_blank">Aldo</a></h4>
<p>A traditional italian meal. This spaghetti consists of onions, pancetta bacon, passata (or crushed tomatoes), as well as some other things. This dish is very filling.</p>
</div>
</section>
<!-- =================Dessert=============== -->
<h1 class="dessert-title title-card">Dessert</h1>
<section class="dessert">
<div class="dd-recipe dd1">
<a href="https://www.allrecipes.com/recipe/10813/best-chocolate-chip-cookies/?internalSource=hub%20recipe&referringId=362&referring
ContentType=Recipe%20Hub&clickId=cardslot%207" target="_blank"><img src="img/dessert/chocolate-chip-cookies.jpg" alt="Best Chocolate Chip Cookies"></a>
<h2>Best Chocolate Chip Cookies</h2>
<h4>by <a href="https://www.allrecipes.com/cook/Dora%C2%BBDora" target="_blank">Dora</a></h4>
<p>The most simple, yet tasty chocolate chip recipe out there. If you're feeling like a treat then this is definitely the way to go! Get you're pan ready and the oven preheated!</p>
</div>
<div class="dd-recipe dd2">
<a href="https://www.tasteofhome.com/recipes/favorite-pumpkin-cake-roll/" target="_blank"><img src="img/dessert/pumpkin-cake-roll.jpg" alt="Favorite Pumpkin Cake Roll"></a>
<h2>Favorite Pumpkin Cake Roll</h2>
<h4>by <a href="https://www.tasteofhome.com/" target="_blank">Taste of Home</a></h4>
<p>This is a nice, cake roll for the whole family! Taste of Home says it's their "favorite pumpkin cake roll" and it was featured on their list of
<a href="https://www.tasteofhome.com/collection/the-best-desserts/" target="_blank">The Best Desserts of 2019</a>! Can you believe that? You'll have to try it yourself to find out!</p>
</div>
<div class="dd-recipe dd3">
<a href="https://www.tasteofhome.com/recipes/chocolate-chess-pie/" target="_blank"><img src="img/dessert/chocolate-chess-pie.jpg" alt="Chocolate Chess Pie"></a>
<h2>Chocolate Chess Pie</h2>
<h4>by <a href="https://www.tasteofhome.com/" target="_blank">Taste of Home</a></h4>
<p>A rich and flavorful pie for a filling dessert. This is a soft and chewy dish for those who love their chocolate! Make sure to have napkins nearby because this one could get messy!</p>
</div>
</section>
<!-- =================FOOTER=============== -->
<footer>
<div class="credits">Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik" class="credit-link">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon" class="credit-link"> www.flaticon.com</a>
</div>
<a href="#back-to-top" class="back-to-top-link">Back to Top</a>
</footer>
</body>
</html>
问题视频：
我会听取任何建议，因为我对此还很陌生。感谢任何 comments/advice/answers！ :)
我已经在 Firefox 中检查过了，它在那里工作，也有可能你忘记了以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1">
这将确保您的媒体查询更像您期望的那样工作。
MDN:
宽度属性 控制视口的大小。它可以设置为特定数量的像素，如 width=600 或特殊值 device-width，即 100% 比例下屏幕的宽度（以 CSS 像素为单位）。 （有相应的高度和设备高度值，这对于包含根据视口高度更改大小或位置的元素的页面可能很有用。）
initial-scale 属性 控制首次加载页面时的缩放级别。最大比例、最小比例和用户可缩放属性控制允许用户放大或缩小页面的方式。
来源：
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
我正在尝试针对手机和平板电脑等小型设备的响应能力进行媒体查询。我不确定为什么，但我的媒体查询不会在它应该（或根本不会）触发时触发。它应该在最大宽度为 500px 时触发。
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&display=swap');
:root {
--gray: #6e6e6e;
--author-credit: #837d7d;
--bg-color: #24252A;
--light-blue: #0088A9;
--breakfast: #B0BFB5;
--breakfast-bg: #92A699;
--lunch: #709e88;
--lunch-bg: #598e74;
--dinner: #DD1512;
/*#E21612*/
--dinner-bg: #CB1310;
/*#C01310*/
--dessert: #5E4C45;
--dessert-bg: #50413B;
scroll-behavior: smooth;
outline: none;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-color);
}
.nav-links ul li,
.nav-links ul li a,
.cta button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: wheat;
text-decoration: none;
}
.nav-links ul li {
list-style: none;
}
.nav-links li {
display: inline-block;
padding: 0 30px;
border-right: 2px solid var(--gray);
}
.nav-links li:last-child {
border-right: none;
}
.logo img {
transition: all 0.4s ease linear;
}
.logo:hover img {
width: 110%;
height: 110%;
}
.nav-links li a {
transition: 0.4s ease;
}
.nav-links li a:hover {
color: var(--light-blue);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 15%;
-webkit-box-shadow: 0 5px 5px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 5px 5px 4px rgba(0, 0, 0, 0.4);
margin-bottom: 10px;
position: sticky;
position: -webkit-sticky;
border-radius: 0 0 25px 25px;
top: 0;
background-color: var(--bg-color);
z-index: 5;
}
.cta button {
padding: 10px 20px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s ease;
outline: none;
}
.cta button:hover {
background-color: rgba(6, 118, 145, 1);
/* border-radius: 25px; */
}
.title-card {
font-family: "Poppins", sans-serif;
color: wheat;
font-weight: 400;
border-bottom: 3px solid;
margin-top: 60px;
margin-left: 15px;
margin-bottom: 75px;
padding: 0;
width: 250px;
}
.breakfast-title {
border-color: var(--breakfast);
}
.lunch-title {
border-color: var(--lunch);
}
.dinner-title {
border-color: var(--dinner);
}
.dessert-title {
border-color: var(--dessert);
}
/* ================Breakfast=============== */
.breakfast {
display: grid;
background-color: var(--breakfast-bg);
border-radius: 15px;
width: 100%;
grid-template: auto / repeat(3, 300px);
grid-gap: 20px 10px;
justify-content: space-around;
align-items: stretch;
grid-template-areas: "no1 no2 no3";
}
.breakfast a {
text-decoration: underline;
color: var(--bg-color);
transition: all 0.4s ease;
}
.breakfast a:hover {
color: var(--light-blue);
}
.b1 {
grid-area: no1;
}
.b2 {
grid-area: no2;
}
.b3 {
grid-area: no3;
}
.b-recipe {
background-color: var(--breakfast);
margin-top: 10%;
margin-bottom: 10%;
border-radius: 7px;
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}
.b-recipe h2 {
font-family: "Poppins";
font-size: 18px;
padding: 5px 10%;
color: var(--bg-color);
border-bottom: 2px solid var(--breakfast-bg);
}
.b-recipe h4 {
color: var(--author-credit);
padding: 5px 10%;
font-family: "Noto Serif", serif;
}
.b-recipe h4 a {
color: var(--author-credit);
text-decoration: none;
transition: 0.75s ease;
}
.b-recipe h4 a:hover {
color: var(--light-blue);
}
.b-recipe p {
font-family: "Poppins";
font-size: 14px;
padding: 5px 10%;
color: var(--bg-color);
}
.b-recipe img {
max-height: 52%;
max-width: 100%;
border-radius: 7px 7px 0 0;
padding: 0;
}
/* ================Lunch=============== */
.lunch {
display: grid;
background-color: var(--lunch-bg);
border-radius: 15px;
width: 100%;
grid-template: auto / repeat(3, 300px);
grid-gap: 20px 10px;
justify-content: space-around;
align-items: stretch;
grid-template-areas: "no1 no2 no3";
}
.lunch a {
text-decoration: underline;
color: var(--bg-color);
transition: all 0.4s ease;
}
.lunch a:hover {
color: var(--light-blue);
}
.l1 {
grid-area: no1;
}
.l2 {
grid-area: no2;
}
.l2 img {
width: 100%;
}
.l3 {
grid-area: no3;
}
.l-recipe {
background-color: var(--lunch);
margin-top: 10%;
margin-bottom: 10%;
border-radius: 7px;
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}
.l-recipe h2 {
font-family: "Poppins";
font-size: 18px;
padding: 5px 10%;
color: var(--bg-color);
border-bottom: 2px solid var(--lunch-bg);
}
.l-recipe h4 {
color: var(--author-credit);
padding: 5px 10%;
font-family: "Noto Serif", serif;
}
.l-recipe h4 a {
color: var(--author-credit);
text-decoration: none;
transition: 0.75s ease;
}
.l-recipe h4 a:hover {
color: var(--light-blue);
}
.l-recipe p {
font-family: "Poppins";
font-size: 14px;
padding: 5px 10%;
color: var(--bg-color);
}
.l-recipe img {
max-height: 52%;
max-width: 100%;
border-radius: 7px 7px 0 0;
padding: 0;
}
/* ================ Dinner =============== */
.dinner {
display: grid;
background-color: var(--dinner-bg);
border-radius: 15px;
width: 100%;
grid-template: auto / repeat(3, 300px);
grid-gap: 20px 10px;
justify-content: space-around;
align-items: stretch;
grid-template-areas: "no1 no2 no3";
}
.dinner a {
text-decoration: underline;
color: var(--bg-color);
transition: all 0.4s ease;
}
.dinner a:hover {
color: var(--light-blue);
}
.d1 {
grid-area: no1;
}
.d1 img {
width: 100%;
}
.d2 {
grid-area: no2;
}
.d2 img {
width: 100%;
}
.d3 {
grid-area: no3;
}
.d-recipe {
background-color: var(--dinner);
margin-top: 10%;
margin-bottom: 10%;
border-radius: 7px;
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}
.d-recipe h2 {
font-family: "Poppins";
font-size: 18px;
padding: 5px 10%;
color: var(--bg-color);
border-bottom: 2px solid var(--dinner-bg);
}
.d-recipe h4 {
color: var(--author-credit);
padding: 5px 10%;
font-family: "Noto Serif", serif;
}
.d-recipe h4 a {
color: var(--author-credit);
text-decoration: none;
transition: 0.75s ease;
}
.d-recipe h4 a:hover {
color: var(--light-blue);
}
.d-recipe p {
font-family: "Poppins";
font-size: 14px;
padding: 5px 10%;
color: var(--bg-color);
}
.d-recipe img {
max-height: 52%;
max-width: 100%;
border-radius: 7px 7px 0 0;
padding: 0;
}
/* ================== Dessert ================== */
.dessert {
display: grid;
background-color: var(--dessert-bg);
border-radius: 15px;
width: 100%;
grid-template: auto / repeat(3, 300px);
grid-gap: 20px 10px;
justify-content: space-around;
align-items: stretch;
grid-template-areas: "no1 no2 no3";
}
.dessert a {
text-decoration: underline;
color: var(--bg-color);
transition: all 0.4s ease;
}
.dessert a:hover {
color: var(--light-blue);
}
.dd1 {
grid-area: no1;
}
.dd2 {
grid-area: no2;
}
.dd2 img {
width: 100%;
}
.dd3 {
grid-area: no3;
}
.dd3 img {
width: 100%;
}
.dd-recipe {
background-color: var(--dessert);
margin-top: 10%;
margin-bottom: 10%;
border-radius: 7px;
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}
.dd-recipe h2 {
font-family: "Poppins";
font-size: 18px;
padding: 5px 10%;
color: var(--bg-color);
border-bottom: 2px solid var(--dessert-bg);
}
.dd-recipe h4 {
color: var(--author-credit);
padding: 5px 10%;
font-family: "Noto Serif", serif;
}
.dd-recipe h4 a {
color: var(--author-credit);
text-decoration: none;
transition: 0.75s ease;
}
.dd-recipe h4 a:hover {
color: var(--light-blue);
}
.dd-recipe p {
font-family: "Poppins";
font-size: 14px;
padding: 5px 10%;
color: var(--bg-color);
}
.dd-recipe img {
max-height: 52%;
max-width: 100%;
border-radius: 7px 7px 0 0;
padding: 0;
}
footer {
display: flex;
box-shadow: 0 -4px 10px 10px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 -4px 10px 10px rgba(0, 0, 0, 0.4);
border-radius: 30px 30px 0 0;
height: 125px;
padding: 10px;
/* position: absolute; */
bottom: 5px;
margin-top: 75px;
/* border-top: 3px solid var(--gray); */
align-items: flex-end;
justify-content: space-between;
font-family: "Poppins";
color: var(--gray);
text-decoration: none;
}
.back-to-top-link {
text-decoration: none;
color: var(--gray);
margin-right: 10px;
transition: 0.4s ease;
}
.back-to-top-link:hover {
color: var(--light-blue);
}
.credit-link {
text-decoration: underline;
color: var(--gray);
transition: 0.4s ease;
}
.credit-link:hover {
color: var(--light-blue);
}
@media only screen and (max-width: 500px) {
.breakfast,
.lunch,
.dinner,
.dessert {
grid-template-columns: auto;
padding: 50px;
grid-template-areas: "no1" "no2" "no3";
}
.nav-links ul li a,
.cta button {
font-size: 20px;
}
footer div,
footer a {
font-size: 20px;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Recipes at Home | The best home-made recipes on the web!</title>
<link rel="icon" href="img/logo-dark.svg">
<link rel="stylesheet" href="landing.css">
</head>
<body>
<header class="nav-container">
<a href="#" class="logo"><img src="img/logo-dark.svg" alt="Home Logo"></a>
<nav class="nav-links">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
<a href="#" class="cta"><button>Contact</button></a>
</header>
<!-- ====================Breakfast================== -->
<h1 class="breakfast-title title-card" id="back-to-top">Breakfast</h1>
<section class="breakfast">
<div class="b-recipe b1">
<a href="https://www.foodnetwork.com/recipes/
ina-garten/cinnamon-baked-doughnuts-recipe-2135621" target="_blank"><img src="img/breakfast/cinnamon-baked-doughnuts.jpeg" alt="Cinnamon Baked Doughnuts"></a>
<h2>Cinnamon Baked Doughnuts</h2>
<h4>by <a href="https://www.foodnetwork.com/profiles/talent/ina-garten" target="_blank">Ina Garten</a></h4>
<p>A simple recipe for homemade (cinnamon) doughnuts. The recipe is simple and quite easy to follow. This recipe has great reviews and should make for a great morning treat!</p>
</div>
<div class="b-recipe b2">
<a href="https://www.foodnetwork.com/recipes/food-network-kitchen/
healthy-banana-bread-muffins-recipe-7217371" target="_blank"><img src="img/breakfast/healthy-banana-bread-muffins.jpeg" alt="Healthy Banana Bread Muffins"></a>
<h2>Healthy Banana Bread Muffins</h2>
<h4>by <a href="https://www.foodnetwork.com/profiles/talent/food-network-kitchen" target="_blank">Food Network Kitchen</a></h4>
<p>Another one straight from the kind people in the kitchen! This recipe will make a small batch of healthy breakfast muffins for the whole family! You won't regret making these.</p>
</div>
<div class="b-recipe b3">
<a href="https://www.foodnetwork.com/recipes/food-network-kitchen/homemade-pancake-mix-3571180" target="_blank"><img src="img/breakfast/homemade-pancake-mix.jpeg" alt="Homemade Pancake Mix"></a>
<h2>Homemade Pancake Mix</h2>
<h4>by <a href="https://www.foodnetwork.com/profiles/talent/food-network-kitchen" target="_blank">Food Network Kitchen</a></h4>
<p>A delightful recipe for your very own pancake recipe mix. This one's straight from the kitchen! You'll be loving pancakes for days after this one!</p>
</div>
</section>
<!-- =================Lunch=============== -->
<h1 class="lunch-title title-card">Lunch</h1>
<section class="lunch">
<div class="l-recipe l1">
<a href="https://www.delish.com/cooking/recipe-ideas/a26870550/ham-and-cheese-sandwich-recipe/" target="_blank">
<img src="img/lunch/ham-and-cheese-sandwich.jpg" alt="Ham and Cheese Sandwich"></a>
<h2>Ham and Cheese Sandwich</h2>
<h4>by <a href="https://www.delish.com/author/17077/lena-abraham/" target="_blank">Lena Abraham</a></h4>
<p>This is a simple ham and cheese sandwich recipe. This will probably take around 20 minutes to make, but it's worth the time! You won't want to miss out on this one!</p>
</div>
<div class="l-recipe l2">
<a href="https://www.delish.com/cooking/recipe-ideas/
a19601468/easy-pasta-salad-recipe/" target="_blank"><img src="img/lunch/italian-pasta-salad.jpg" alt="Italian Pasta Salad"></a>
<h2>Italian Pasta Salad</h2>
<h4>by <a href="https://www.delish.com/author/17846/makinze-gore/" target="_blank">Makinze Gore</a></h4>
<p>A great, italian salad for a healthy lunch! This dish has noodles, pepperonis, tomatoes, black olives, and much more. If you're feeling like italian, you'll definitely love this one!</p>
</div>
<div class="l-recipe l3">
<a href="https://www.allrecipes.com/recipe/85901/spicy-grilled-cheese-sandwich/?
internalSource=staff%20pick&referringId=17561&referringContentType=Recipe%20Hub" target="_blank"><img src="img/lunch/spicy-grilled-cheese.jpeg" alt="Spicy Grilled Cheese Sandwich"></a>
<h2>Spicy Grilled Cheese Sandwich</h2>
<h4>by <a href="https://www.allrecipes.com/cook/1415649" taget="_blank">PATELGURL</a></h4>
<p>This is a simple grilled cheese. However, it has a little bit of added spice to it! Get your butter and cheese ready and turn on the stove!</p>
</div>
</section>
<!-- =================Dinner=============== -->
<h1 class="dinner-title title-card">Dinner</h1>
<section class="dinner">
<div class="d-recipe d1">
<a href="https://www.tasteofhome.com/recipes/quick-chicken-piccata/" target="_blank">
<img src="img/dinner/chicken-piccata.jpg" alt="Chicken Piccata"></a>
<h2>Chicken Piccata</h2>
<h4>by <a href="https://www.tasteofhome.com/" target="_blank">Taste of Home</a></h4>
<p>This is a nice evening filler for all! This one may take some more time than the others, but it is definitely worth it! It's reccomended for a family.</p>
</div>
<div class="d-recipe d2">
<a href="https://www.allrecipes.com/recipe/18073/honey-wheat-sandwich-rolls/?
internalSource=recipe%20hub&referringId=17561&referringContentType=Recipe%20Hub&
clickId=cardslot%2034" target="_blank"><img src="img/dinner/honey-wheat-rolls.jpeg" alt="Honey Wheat Sandwich Rolls"></a>
<h2>Honey Wheat Sandwhich Rolls</h2>
<h4>by <a href="https://www.allrecipes.com/cook/50535" target="_blank">SEEFREE</a></h4>
<p>This is a simple but elegant honey wheat roll recipe. It has a sweat, warm flavor to it while maintaining the softness of a good roll. These are good for an apetizer.</p>
</div>
<div class="d-recipe d3">
<a href="https://www.allrecipes.com/recipe/264440/traditional-spaghetti-allamatriciana/?internalSource=staff%20pick&
referringId=723&referringContentType=Recipe%20Hub&clickId=cardslot%203" target="_blank"><img src="img/dinner/traditional-spaghetti.jpeg" alt="Traditional Spaghetti all'Amatriciana"></a>
<h2>Traditional Spaghetti all'Amatriciana</h2>
<h4>by <a href="https://www.allrecipes.com/cook/Aldo%C2%BBAldo" target="_blank">Aldo</a></h4>
<p>A traditional italian meal. This spaghetti consists of onions, pancetta bacon, passata (or crushed tomatoes), as well as some other things. This dish is very filling.</p>
</div>
</section>
<!-- =================Dessert=============== -->
<h1 class="dessert-title title-card">Dessert</h1>
<section class="dessert">
<div class="dd-recipe dd1">
<a href="https://www.allrecipes.com/recipe/10813/best-chocolate-chip-cookies/?internalSource=hub%20recipe&referringId=362&referring
ContentType=Recipe%20Hub&clickId=cardslot%207" target="_blank"><img src="img/dessert/chocolate-chip-cookies.jpg" alt="Best Chocolate Chip Cookies"></a>
<h2>Best Chocolate Chip Cookies</h2>
<h4>by <a href="https://www.allrecipes.com/cook/Dora%C2%BBDora" target="_blank">Dora</a></h4>
<p>The most simple, yet tasty chocolate chip recipe out there. If you're feeling like a treat then this is definitely the way to go! Get you're pan ready and the oven preheated!</p>
</div>
<div class="dd-recipe dd2">
<a href="https://www.tasteofhome.com/recipes/favorite-pumpkin-cake-roll/" target="_blank"><img src="img/dessert/pumpkin-cake-roll.jpg" alt="Favorite Pumpkin Cake Roll"></a>
<h2>Favorite Pumpkin Cake Roll</h2>
<h4>by <a href="https://www.tasteofhome.com/" target="_blank">Taste of Home</a></h4>
<p>This is a nice, cake roll for the whole family! Taste of Home says it's their "favorite pumpkin cake roll" and it was featured on their list of
<a href="https://www.tasteofhome.com/collection/the-best-desserts/" target="_blank">The Best Desserts of 2019</a>! Can you believe that? You'll have to try it yourself to find out!</p>
</div>
<div class="dd-recipe dd3">
<a href="https://www.tasteofhome.com/recipes/chocolate-chess-pie/" target="_blank"><img src="img/dessert/chocolate-chess-pie.jpg" alt="Chocolate Chess Pie"></a>
<h2>Chocolate Chess Pie</h2>
<h4>by <a href="https://www.tasteofhome.com/" target="_blank">Taste of Home</a></h4>
<p>A rich and flavorful pie for a filling dessert. This is a soft and chewy dish for those who love their chocolate! Make sure to have napkins nearby because this one could get messy!</p>
</div>
</section>
<!-- =================FOOTER=============== -->
<footer>
<div class="credits">Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik" class="credit-link">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon" class="credit-link"> www.flaticon.com</a>
</div>
<a href="#back-to-top" class="back-to-top-link">Back to Top</a>
</footer>
</body>
</html>
问题视频：
我会听取任何建议，因为我对此还很陌生。感谢任何 comments/advice/answers！ :)
我已经在 Firefox 中检查过了，它在那里工作，也有可能你忘记了以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1">
这将确保您的媒体查询更像您期望的那样工作。
MDN:
宽度属性 控制视口的大小。它可以设置为特定数量的像素，如 width=600 或特殊值 device-width，即 100% 比例下屏幕的宽度（以 CSS 像素为单位）。 （有相应的高度和设备高度值，这对于包含根据视口高度更改大小或位置的元素的页面可能很有用。）
initial-scale 属性 控制首次加载页面时的缩放级别。最大比例、最小比例和用户可缩放属性控制允许用户放大或缩小页面的方式。
来源：
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag