深入探究@media查询

媒体查询是我们作为 Web 开发人员日常生活的重要组成部分，但是，我们大多数人对媒体查询的功能还只是略知皮毛。

对于那些不熟悉这个概念的人，让我简单解释一下。

什么是媒体查询？

为了说明这一点，请尝试更改浏览器窗口的大小。当您移动浏览器窗口时，您会注意到元素的大小和位置通常会根据屏幕的宽度和高度而移动。

这是由于媒体查询的作用，它的作用是根据设备的常规类型或某些参数（例如其大小）来修改网站的布局。

媒体查询的一般语法如下：

@media screen and (min-width: 685px) {
  .title {
    font-size: 2rem;
  }
}

• screen是样式将应用到的媒体类型。此媒体查询适用于屏幕。
• and是一个逻辑运算符，你可以根据需要将它们串联起来。例如，你可以对min-width: 685px 和 orientation: landscape进行媒体查询。
• min-width:是一项媒体功能，在本例中，它指示浏览器仅在达到最小宽度 685 像素时才应用两个括号之间的样式。您可以使用多种单位类型，例如rem。

好吧，让我们@media通过 Codepen 上的具体示例来了解一下查询真正能做什么。

媒体类型

我们大多数人都知道screen媒体类型，但还有另外两种鲜为人知的类型。

媒体类型仅描述设备的类别。默认情况下，all除非使用not或only逻辑运算符，否则将使用该类型。

all

表示查询中的样式适合所有设备。

print

意味着查询中的样式适用于在打印预览模式下在屏幕上查看的分页资料和文档。

例如，如果我们有一个“预订确认”页面，希望用户打印，我们可以使用此媒体查询隐藏底部的社交媒体链接。

右键单击并尝试打印此页面应该会显示不带底部文本的预览。

screen

我们通常的做法。意味着这些样式是为屏幕设计的。

speech

此类型适用于屏幕阅读器。

虽然只有极少数 CSS 属性会影响屏幕阅读器的行为，但了解此类型仍然值得。例如，您可以隐藏屏幕上不应被屏幕阅读器读取的特定元素，或者大声朗读代码标点符号。

基本媒体功能

我不会列出所有媒体功能，因为其中一些功能比较冷门，而且使用场景很少。如果您对完整列表感兴趣，可以点击此处查看。

width和height

这些功能是我们赖以生存的基石，让我们能够根据视口的宽度和高度应用样式。

例如，DEV 分别在到达和到达时隐藏了navigation和newest listings侧视图950px（1120px快来试试吧！）。

orientation

顾名思义，它允许我们根据设备的方向应用样式。要么 ，portrait要么landscape。

display-mode

根据应用程序的显示模式应用样式。

可用模式包括：fullscreen、standalone和。更多信息请minimal-ui参见。browser

@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

复杂媒体查询

通过使用逻辑运算符（例如and，，和（逗号） not，我们现在可以为特定用例构建复杂的媒体查询。only,

在这个例子中，我们希望我们的视频帧在横向模式和平板电脑上占据屏幕的整个宽度和高度（以获得更好的观看体验）：

此外，您可以使用逗号将任何给定的样式应用于多个查询，例如：

@media (min-height: 680px), screen and (orientation: portrait) { ... }

关于媒体查询的内容到此就基本讲完了。当然，还有很多功能可以学习，但本文涵盖的工具可以帮你实现大多数响应式布局。

我希望你至少在本文中学到了一些东西，如果有的话，请随时在 Twitter 上关注我@christo_kade，我通常会在那里分享代码片段、技巧和窍门以及新文章🤗