我已经使用网格布局创建了一个单价组件。对于375像素的移动屏幕，我希望将网格布局变成单个，以使其成为2行的两个div，而不是一列具有2的div。我为移动设备设置的媒体查询无法显示预期结果。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Single Price Grid Component</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="box1">
<h2>Join our community</h2>
<h3>30-day, hassle-free money back guarantee</h3>
<p>Gain access to our full library of tutorials along with expert code reviews.<br>
Perfect for any developers who are serious about honing their skills.</p>
</div>
<div class="grid">
<div class="box2">
<h3>Monthly Subscription</h3>
<div><span class="big">$29</span><span class="light">per month</span></div>
<p>Full access for less than $1 a day</p>
<input type="submit" value="Sign Up" class="submit">
</div>
<div class="box3">
<h3>Why Us</h3>
<ul class="light">`enter code here`
<li>Tutorials by industry experts</li>
<li>Peer & expert code review</li>
<li>Coding exercises</li>
<li>Access to our GitHub repos</li>
<li>Community forum</li>
<li>Flashcard decks</li>
<li>New videos every week</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS样式：
body,html {
margin:0;
padding:0;
box-sizing: border-box;
font: 16px 'Karla', sans-seriff;
}
.container { max-width: 1440px; }
.row {
width: 50%;
height: 50%;
margin: 110px 0 0 350px;
border-radius: 10px;
box-shadow: 0 0 0 10px hsl(204, 43%, 93%);
}
.box1 { padding: 15px 10px 15px 30px; }
h2 { color: hsl(179, 62%, 43%); }
.box1 h3 { color: greenyellow; }
.box1 p {
line-height: 25px;
color: hsl(218, 22%, 67%);
}
.grid {
display:grid;
grid-template-columns: repeat(2, 1fr) ;
text-align: left;
color: hsl(204, 43%, 93%);
}
.box2 {
background-color: hsl(179, 84%, 27%);
border-bottom-left-radius: 10px;
color: white;
padding-left: 35px;
}
.box2 h3 { padding-top: 10px; }
.big {
font-size: 30px;
padding-right: 15px;
}
.light { opacity: 80%; }
.box2 p { margin-bottom: 22px; }
.submit {
background-color: greenyellow;
border: none;
padding: 10px 95px;
color: yellow;
font-weight: 700;
margin-bottom: 30px;
border-radius: 7px;
box-shadow: -10px -10px 7px 10px hsl(179, 84%, 27%),
10px 10px 7px 10px hsl(179, 84%, 27%);
}
.submit:hover { background-color:rgb(141, 223, 19); }
.box3 {
background-color: hsla(179, 85%, 33%, 0.918);
border-bottom-right-radius: 10px;
color: white;
}
ul { list-style: none; }
.box3 h3 { margin-left: 40px; }
/*----------MEDIA QUERIES----------*/
@media only screen and (max-device-width: 375px) {
.grid div {
display: grid;
grid-template-columns: 1fr;
}
}
事实是，您在.grid中引用div而不是更改网格布局。您正在此.grid组件中制作新的。
@media only screen and (max-width: 375px) {
.grid {
grid-template-columns: 1fr;
}
}
而且我宁愿使用max-width而不是max-device-width。
最大宽度是目标显示区域的宽度，例如浏览器max-device-width是设备整个渲染区域（即实际设备屏幕）的宽度。