为响应式web设计创建媒体查询

为响应式web设计创建媒体查询

原文链接:Creating Media Queries for Responsive Web Designs

作者:Chris Ward

译者:Liubara

本文已获得作者授权,转载请注明出处。

这篇文章是我从新书Jump Start Responsive Web Design, 2nd Edition中摘录出来的,这本书在各个商店均有销售,或者你可以点击这里购买电子版。

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时或者当设备横向时将它隐藏起来。

@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的显示情况,同时也展示了怎么将逻辑约束结合起来。

OnlyNot的逻辑查询

我们也可以用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-monochrome: 8) {
    
}

分辨率 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)中针对大屏幕的断点上,所有的元素都显示出来。

小屏幕断点生成的布局:

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