媒体查询不适用于手机屏幕尺寸 [英] media queries not working on mobile screen size
问题描述
我已经使用网格布局创建了一个单价组件.对于375像素的移动屏幕，我希望将网格布局变成单个，以使其成为2行的两个div，而不是一列具有2的div.我为移动设备设置的媒体查询无法显示预期结果.
I have created a single-price-component using grid layout. For the mobile screen of 375px, I want the grid layout to become a single to become 2 rows of two divs instead of one column with two divs. The media queries I set for the mobile is not working to display the expected results.
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组件中创建新的.
Thing is that you are referencing div inside .grid instead of changing the grid layout. You're making new one in this .grid component.
@media only screen and (max-width: 375px) {
.grid {
grid-template-columns: 1fr;
}
}
我宁愿使用 max-width 而不是 max-device-width .
max-width是目标显示区域的宽度，例如浏览器max-device-width是设备整个呈现区域(即实际设备屏幕)的宽度.
max-width is the width of the target display area, e.g. the browser max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.
这篇关于媒体查询不适用于手机屏幕尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
