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

Question

我希望以下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)，它只适用于小型设备。但它不起作用，我也不知道为什么。

提前致谢。

Answer 1

对于CSS单位，em s是基于继承的font-size的相对大小。由于您是初学者，我现在坚持使用px值。就像@MichaelSorensen所说，设定一个较低的值。根据您发布的媒体查询，您说'＃34;所有max-width 980px的窗口应该应用这些值＆＃34;。想要它只适用于小型设备吗？设置较低的值。

Here are some standard device widths [CSS Tricks]

值得一提的是＆＃34;移动优先＆＃34;是一个你会看到很多的概念。基本上，您从适用于所有设备的媒体查询开始，然后开始添加适用于 up 的特定大小的媒体查询断点。这是一个简单的例子。

/* 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 */
    }
}

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

Answer 2

@mccambridge的答案正确。我认为@Liz Parody可能有其他问题。我教了一些学生，其中许多人在媒体查询方面遇到了麻烦，因为有些容易忘记的事情。

1. 请记住，媒体查询的功能类似于if语句。这样，多个查询就可以解决true。以下面的图片为例。

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

但是，您可以重新排序它们，结果将改变。使用多个样式表会使情况特别复杂。有多种有效的策略可以应对，我只建议选择一种并坚持使用，以确保您的整个团队都在同一页面上。