CSS Media媒体查询 – 代码cn 代码吧

过去，各种技术被用于针对特定的移动设备，包括 Javascript。过去，我们甚至使用 Internet Explorer 特定的 HTML 标记来仅针对这些浏览器。

值得庆幸的是，那些日子已经一去不复返了，我们只剩下一组标准化的媒体查询。在本节中，我们将介绍它们的工作原理。

句法#

媒体查询遵循@CSS 动画使用的相同语法。我们可以将 CSS 放在媒体查询中，表示它仅在满足该媒体查询的条件时运行。

这让我们可以瞄准更小的屏幕，等等。考虑以下示例：

div {
    color: red;
}
@media screen and (max-width: 1000px) {
    div {
        color: blue;
    }
}

上面的代码将所有divs 设置为红色。然后，如果屏幕视口变得小于 1000px，无论是因为它是移动设备，还是用户调整了窗口大小，所有divs 都会突然出现蓝色文本。

请注意，我们提到screen并使用and关键字链接多个条件。我们已经提到了屏幕，但也可以将其设置print为打印文档，或all两者兼而有之。让我们看一下当今可用的一些最有用的媒体查询。

Max/Min最大/最小#

如前所述，我们可以设置最大宽度，即仅当视口小于该宽度时才存在的样式。但是，我们也可以设置一个 min-width，它只适用于一定尺寸以上的屏幕或设备。语法类似：

@media (min-width: 300px) {}
@media (max-width: 1000px) {}

高度Heights

我们也有类似的高度设置，如下图：

@media (min-height: 200px) {}
@media (max-height: 800px) {}

特定宽度和高度#

虽然我们可以使用最大和最小宽度，但我们也可以使用关键字width或height在两个值之间选择屏幕尺寸。一个例子如下所示：

@media (200px <= width <= 1000px) { }

这将仅针对 200px 和 1000px 之间的屏幕，这在某些情况下比使用两个单独的子句更有用。也可以这样做height。

方向#

曾经想仅以横向定位手机吗？我们可以通过媒体查询来做到这一点。方向接受两个值，要么portrait要么landscape。一个例子如下所示：

@media (orientation: landscape) { }

解析度#

我们也可以根据屏幕分辨率选择页面。下面的媒体查询选择像素密度大于 1.2 的任何屏幕。这很有用，因为它还考虑了页面缩放。对于打印的文档，我们通常使用 dpi。

@media screen and (resolution > 1.2dppx) { }
@media print (resolution > 300dpi) { }

Hover and Pointer悬停和指针#

悬停非常有用，因为它可以让我们定位具有悬停功能的页面。这意味着用户可以将鼠标悬停在其上的页面。由于大多数触摸手机都没有此功能，因此您不会成为目标：

@media screen and hover {
    /* Only devices with hover capability, i.e. with mouses */
}

指针

较少使用，但在具有精细输入机制的设备（即触摸板、鼠标或触控笔）和具有更多“corase”输入的设备（如触摸板）之间进行了区分。因此，它可以设置为coarse,fine或none, none 表示没有输入指针。

@media screen and (pointer: coarse) {
    /* Devices with inputs like touch, but no mouse pointer */
}
@media screen and (pointer: fine) {
    /* Devices with mouse pointers or styluses */
}
@media screen and (pointer: none) {
    /* Devices with no pointers */
}

交错式和渐进式#

一些设备交替渲染一行像素，允许更高的fps值。这被称为隔行扫描，通常在这些屏幕上避免快速移动以避免梳理或项目出现在一条线上，而不是另一条线上。渐进式屏幕没有这个问题。因此，我们可以使用以下媒体查询来最小化一些旧等离子电视屏幕的移动interlaced：

@media screen (scan: interlaced) {}
@media screen (scan: progressive) {}

纵横比#

这让我们可以针对特定的纵横比屏幕，并以不同的方式显示内容。如果我们希望我们的页面显示在各种不同的屏幕上，这很有用。我们还可以设置min和max值。

@media (min-aspect-ratio: 16/9) {}
@media (max-aspect-ratio: 16/10) {}
@media (aspect-ratio: 4/3) {}

句法#