响应式 css 仅适用于小型设备答案

【问题标题】：Responsive css not working on small devices only响应式 css 仅适用于小型设备
【发布时间】：2018-06-20 01:22:30
【问题描述】：

我希望以下 css 仅适用于小型设备（移动设备），但也适用于移动设备和平板电脑。我怎样才能让它只在移动设备上运行？

@media (max-width: 980px) {
  h2 {
    font-size: 3em;
  }

  p {
    font-size: 2.3em;
    line-height: 1.7em;
  }

  button {
    width: 400px;
    height: 80px;
    font-size: 30px;
  }
}

根据postcss，如果我这样做@media (max-width: 30em)，它将仅适用于小型设备。但它不起作用，我不知道为什么。

提前致谢。

【问题讨论】：

您的小型设备有多宽？您应该能够简单地将 max-width 值修改为该设备的宽度。例如：iphoneX 的宽度为 375px，因此您可以设置 @media (max-width: 376) 将样式设置为仅适用于宽度小于 375 的设备。
谢谢！ @MichaelSorensen 我尝试了max-width: 376px 和其他值，但唯一有效的值是大于 980px 的值（即使 979 在小型设备上也不起作用，我正在 iphone 6s 上尝试）我不知道为什么会这样正在发生

标签： css responsive-design styles media-queries postcss

【解决方案1】：

对于 CSS 单位，ems 是基于继承的 font-size 的相对大小。由于您是初学者，所以我现在坚持使用 px 值。就像@MichaelSorensen 所说，设置一个较低的值。对于您发布的媒体查询，您是在说“所有具有max-width 或980px 的窗口都应该应用这些值”。希望它只适用于小型设备？设置一个较低的值。

Here are some standard device widths [CSS Tricks].

值得一提的是，“移动优先”是一个您会经常看到的概念。基本上，您从适用于所有设备的媒体查询开始，然后开始添加适用于特定大小的媒体查询断点向上。这是一个过于简单的例子。

/* this applies to .my-class no matter what size until you override */
.my-class {
    background-color: #f00; /* red */
}

/* this applies starting at 768px, many tablets */
@media screen and (min-width: 768px) {
    .my-class {
        background-color: #0f0 /* green */
    }
}

/* this applies starting at 1200px, many larger devices */
@media screen and (min-width: 1200px) {
    .my-class {
        background-color: #00f /* blue */
    }
}

就像我说的，这过于简单化了。但是，如果您正在阅读有关媒体查询的博客文章但没有得到它，希望这会有所帮助。

【讨论】：

你也可以坚持使用rems。 ems 会堆积起来，使它们处理起来有点复杂。例如，一个 font-size 定义为 3em 的元素和一个也定义 font-size 为 3em 的子元素最终将是 9em。根据我的经验，坚持使用 rem 也是最安全的。将来可能要考虑使用它！（并不是说这目前正在影响结果）。
当然，rems 比 ems 更容易处理。但是，如果我刚开始并且想真正了解正在发生的事情，我会坚持使用px 并在我的大脑中设置一个书签，以便回到其他单元。
同意，希望为他突出差异，因为（根据我的经验）rems（与 ems 相比）无论如何都倾向于更频繁地使用。完全不同意您在 px 上的观点。

【解决方案2】：

虽然@mccambridge 的回答是正确的。我认为@Liz Parody 可能有不同的问题。我教了一些学生，他们中的许多人在媒体查询方面遇到了困难，因为有一些容易忘记的事情。

请记住，媒体查询的功能类似于 if 语句。在那个多个查询可以解析true。以下图为例。

CSS 从上到下呈现，因此在下面的示例中，如果您保持相同的 200 像素屏幕，则会呈现带有蓝色文本的红色框，因为最后一个媒体查询将覆盖前一个。您可以在浏览器的开发工具中看到这一点：

但是，您可以重新排序它们，结果会改变。对于多个样式表，这可能会变得特别复杂。有多种有效的策略可以解决这个问题，我只是建议选择一个并坚持下去，以确保您的整个团队都在同一个页面上。

【讨论】：