媒体查询不适用于移动屏幕尺寸答案

【问题标题】：media queries not working on mobile screen size媒体查询不适用于移动屏幕尺寸
【发布时间】：2020-04-26 04:04:09
【问题描述】：

我使用网格布局创建了一个单一价格组件。对于 375px 的手机屏幕，我希望网格布局变成单列，变成 2 行 2 个 div，而不是 1 列 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 &amp; 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;
  }
}

It should look like this on mobile

【问题讨论】：

标签： html css media-queries css-grid

【解决方案1】：

问题是您在 .grid 中引用 div 而不是更改网格布局。您正在这个 .grid 组件中创建一个新组件。

@media only screen and (max-width: 375px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

我宁愿使用max-width 而不是max-device-width。

max-width 是目标显示区域的宽度，例如浏览器 max-device-width 是设备整个渲染区域的宽度，即实际设备屏幕的宽度。

【讨论】：

我将 max-device-width 更改为 max-width 并使用 grid-template-columns 在 .grid 中创建了网格布局； 1法郎但是浏览器视图中仍然没有任何变化。我在媒体查询中提到的任何样式都不适用于浏览器输出。
@SwethaLakshmi 你确定浏览器宽度小于 375px 吗？
@SwethaLakshmi 我之前创建了 codepen 你可以检查我在那里做了什么也许这会帮助你修复codepen.io/snoh666/pen/NWPyJvG
@SwethaLakshmi 如果您仍然无法解决此问题。只需在我的邮箱上打我。您可以通过 profile>portfolio 找到它;)

【解决方案2】：

继续 @snoh666 的回答，没有 max-device-width 这样的东西。正确的写法是max-width。

【讨论】：

作为附加说明，设备宽度和变体已被弃用。
@OzanAyten 怎么还能用？
该值用于专门控制视口的缩放及其 html 选项，据我所知不是 css。此外，有关更多信息，您可以查看接受的答案：stackoverflow.com/questions/18500836/…
更改它，使元素（网格）在 .div 之前，如下所示：“ @media only screen and (max-device-width: 375px) { div.grid { display: grid ;网格模板列：1fr； }”。希望这会有所帮助
对不起，我指的是课前元素。

【解决方案3】：

使用此代码，它将与您共享的图像文件完全相同。

@media only screen and (max-width: 375px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .container {
    padding: 25px;
  }

  .row {
    margin: 0;
    width: 100%;
  }
}

【讨论】：

我试过但没用。我在媒体查询中提到的任何样式都不适用于浏览器输出
您介意分享一下您正在使用的最新 CSS 文件吗？我可以看看为什么即使你使用了“最大宽度”它也不起作用
是的，但您能告诉我如何将文件从一个用户共享给另一个用户吗？我是新来的，所以我不知道该怎么做。
您可以将所有代码添加到：codepen.io。在这里，您可以通过实时预览添加 HTML、CSS、JS、SCSS 等等。