响应式web-媒体查询

Posted 2020-09-18 AiTing on the way

响应式web-媒体查询

媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂。这些查询语句都是简单但是功能很强大的，它们允许我们检测设备属性，定义规则，并根据规则等的不同加载不同的 CSS 属性。例如，你可以为不同的设备优化导航菜单，将桌面浏览器上的完整水平菜单转换为经常在移动设备上遇到的 “汉堡包”（垂直或折叠）菜单结构

 

web响应式布局的核心有两个，媒体查询和视图。在这篇文章中，我们将会看到怎么运用媒体查询来创建响应式布局。

媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂。这些查询语句都是简单但是功能很强大的，它们允许我们检测设备属性，定义规则，并根据规则等的不同加载不同的CSS属性。例如，你可以为不同的设备优化导航菜单，将桌面浏览器上的完整水平菜单转换为经常在移动设备上遇到的“汉堡包”（垂直或折叠）菜单结构。

创建查询

让我们来尝试一个实际的例子。在网站RWDflix（作者在书中建立的视频网站实例）主要内容旁边的aside标签中显示的是公告和新闻，手机和平板的访客可能专注于看中间的节目列表而不是别的，所以让我们为小屏幕设备的用户把这个元素（aside）隐藏起来。

在本文接下来的部分，我将使用前面所示的@media的方法来进行媒体查询

将当前aside中的CSS类移除并将其替换成下面的媒体查询语句：

@media screen and (min-width: 680px) {
    aside {
        width: 33%;
    }
}


@media screen and (max-width: 680px) {
    aside {
        display: none;
    }
}

 

这一对儿媒体查询语句的作用是：当屏幕宽度大于680px时（通过min-width来询问屏幕的宽度是否最小为680px），将aside元素中的内容设置为33%屏幕宽度；当屏幕宽度比680px窄时（通过max-width来询问屏幕的宽度是否最大为680px），将aside元素隐藏。

接下来，当aside标签隐藏时，将TV视频列表设置为屏幕的宽度。

 

section.showslisting {
    margin-bottom: 25px;
}

@media screen and (min-width: 680px) {
    section.showslisting {
        width: 66%;
    }
}

@media screen and (max-width: 680px) {
    section.showslisting {
        width: 100%;
    }
}

 

当我们在桌面的浏览器中改变页面大小时，可以看到aside标签随着我们页面宽度的变化而出现或隐藏，页面内容部分也随之适宜地调整它的宽度。

当然也可以在我们的媒体查询中运用一些基本的逻辑，然后我们就可以结合这些逻辑创造出很多种情况。例如，可以使用以下的逻辑：

@media only screen and (min-width: 640px) and (max-width: 1136px) {
    …
}

上面的代码将在设备的宽度在640px和1136px之间时调用CSS样式。min-width属性是页面宽度的最小值，max-width是最大值。

若要匹配以上媒体查询语句，需要两个条件都为真。如果在想用逻辑OR（或）时需要用逗号替代AND，此时会在一个条件为真时匹配样式（木有OR表达式，不要搞混了），下面的查询语句将用于屏幕（screen）或打印设备（print）：

@media only screen, print {
    …
}

 

也可以结合AND和OR逻辑来创建更复杂的查询。下面这个页面当前在屏幕较宽的手机上横屏模式渲染：

在上面这张截图里，屏幕宽度为732px，已经高出了上面设置的640px。然而aside元素并没有符合在手机中隐藏的要求，所以需要在屏幕尺寸小于640px时或者当设备横向时将它隐藏起来。

 

　　orientation：portrait | landscape

　　　　portrait：

　　　　指定输出设备中的页面可见区域高度大于或等于宽度(一般为竖屏)

　　　　landscape：

　　　　除portrait值情况外，都是landscape（一般为横屏）

@media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 750px) {
    aside {
        display: none;
    }
}

　　以及视频列表部分相应的媒体查询：

@media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 750px) {
    section.showslisting {
        width: 100%;
    }
}

这里我们增加了一个max-width约束来显示平板横屏模式时aside的显示情况，同时也展示了怎么将逻辑约束结合起来。

Only和Not的逻辑查询

我们也可以用only和not来创建精准的媒体查询。例如，下面这种情况将会匹配至少640px宽度的设备但是排除了打印媒体类型：

@media not print and (min-width: 640px) {
    …
}

 

与之相反，下面的查询语句将仅仅（only）应用于屏幕媒体类型且最小为640px宽度的设备：

@media only screen and (min-width: 640px) {
    …
}

 

查询特性

我们目前所看到的width和height查询是最广泛应用的查询语句，但是也有其他的一些很有用的媒体特性（media feature）来应对不同特性的设备。包括颜色能力、长宽比、取向、分辨率和基于Mozilla-和WebKit-特定供应商（浏览器）的特性。这些特性中的大部分都支持min-和max-前缀并且和上面那些查询语句作用类似。

长宽比 aspect-radio

长宽比特性允许我们限制水平像素与垂直像素的比值，且用一个斜杠隔开。例如：

@media screen and (min-aspect-ratio: 1/1) {
    …
}

 

上面这条规则匹配屏幕宽高比为1:1或比值更大的设备，所以可以是正方形屏或是横屏。

这条规则的常见用途是来检测更宽一些的设备，当我们在播放视频时很有用：

@media screen and (min-aspect-ratio: 16/9) {
    …
}

 

取向 orientation

就像之前显示的那样，这个特性可以检测设备是横屏还是竖屏模式。例如：

@media all and (orientation: landscape) {//横屏
    …
}

 

还有：

@media all and (orientation: portrait) {//竖屏
    …
}

 

颜色 color

这个特性检查设备是否可以支持特定的颜色级别。例如，下面的语句可以用来检测设备是否至少支持8位颜色（256色）：

@media all and (min-color: 8) {
    …
}

 

颜色指数 color-index

这个参数的功能和color很像，但是检测颜色的数量而不是位级：

@media all and (min-color-index: 256) {
    …
}

单色 monochrome

同样，这个参数也与color类似，但是检测设备的灰度：

@media all and (min-color-index: 256) {
    …
}

 

分辨率 resolution

以下语句检测目标设备是否有高分辨率屏幕：

@media all and (min-resolution: 120dpi) {
    …
}

 

扫描 scan

扫描媒体功能让我们检查电视的扫描过程，选项可以是交错的interlace或者是渐进的progressive：

@media all and (scan: progressive) {
    …
}

 

栅格 grid

栅格参数是为了检测设备是否是终端设备。包括旧手机（非智能手机）、可访问的手机（针对视力不好的人）和盲文设备。它会在逻辑正确的时候返回一个布尔值：

@media grid {
    …
}

 

正如大家所见，通过使用维度和基于特性的查询的组合，我们可以创建复杂的样式表来有效地针对大量设备，并对它们进行最有效的工作。这是媒体查询最重要的内容：它们允许我们为特性的设备配置有选择性的加载CSS样式。

简化的示例应用程序

现在我们已经对媒体查询有了基本的理解，让我们来继续创建媒体查询，来使示例网站更加整洁。

首先，整合已经写好的查询代码，将CSS类移动到两组媒体查询语句中：

/* Media Queries */
/* For example, desktop devices */
@media screen and (min-width: 680px) {
    aside {
        width: 33%;
    }


    section.showslisting {
        width: 66%;
    }
}


/* For example, medium-width screens or smaller screens in landscape */
@media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 750px) {
    aside {
        display: none;
    }


    section.showslisting {
        width: 100%;
    }
}

 

整洁了许多！我们可以继续为每一个查询块添加样式。

让我们回顾一下上一节中演示的示例网站，以便为每个屏幕尺寸优化其他内容。下一步要将小屏幕设备上电视节目的描述隐藏，并且在中型屏幕上将描述缩短。

如果描述性文本有一个类，这将是非常方便的，所以为包含节目描述的p标签的每个实例添加一个类：

<section class="tvshow">
    <h3>Show</h3>
    <img src="http://placehold.it/350x150" class="thumbnail">
    <p class="showdescription">Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit.</p>
</section>

 

让我们添加新的媒体查询来适应我们想要支持的各种屏幕尺寸，并且整理现有的尺寸分布。

我们想要设计的要回流（页面重新渲染）的特定宽度被称为断点，我们添加的断点不可能是详尽的：因为设备尺寸是个大范围，而且新的设备不停地会出现新的屏幕尺寸，所以试图用单独的查询来针对每个设备是徒劳的。更好的方法是评估布局设计中需要回流的点，然后为这些断点创建媒体查询。这就是响应性web设计的美妙之处：我们可以确保每个设备都能得到合适的布局，而不必为每个设备分别设计。

增加下面的断点，并将已有的样式重构为：

/* Media Queries */


/* For example, older phones */
@media only screen and (min-width: 320px) {
    aside {
        display: none;
    }


    section.showslisting {
        width: 100%;
    }


    .showdescription {
        display: none;
    }
}


/*For example, newer phones */
@ media only screen and (min-width: 480px) {
} 


/*For example, small computer screens and larger tablets */
@media only screen and (min-width: 768px) {
    .showdescription {
        text-overflow: ellipsis;
        display: block;
        white-space: nowrap;
        width: 100px;
        overflow: hidden;
    }
}

/* For example, typical desktop monitors or larger tablet devices */
@media only screen and (min-width: 992px) {
    aside {
        width: 33%;
        display: block;
    }

    section.showslisting {
        width: 66%;
    }

    .showdescription {
        white-space: normal;
        width: 125px;
    }
}

/* Large Devices, for example large monitors and TVs */
@media only screen and (min-width: 1200px) {
}

 

这些媒体查询语句的意思很明晰。它们对不同屏幕大小的设备定义查询。正如CSS中的C所指的那样，媒体查询是*层叠*的：我们可以对更小屏幕的设备基于断点创建样式并且更改不同的属性。

注意在@media only screen and (min-width: 320px)中针对小屏幕设备的断点和@media only screen and (min-width: 768px)中针对中型屏幕设备的断点，所有的更改都是在showdescription类上：显示文本或者隐藏它。然后在@media only screen and (min-width: 992px)中针对大屏幕的断点上，所有的元素都显示出来。

小屏幕断点生成的布局：

中型屏幕断点生成的布局：
中型屏幕到大屏幕断点间尺寸的布局：