天天看点

《HTML5触摸界面设计与开发》——2.5 响应式的CSS

本节书摘来自异步社区《html5触摸界面设计与开发》一书中的第2章,第2.5节,作者: 【美】stephen woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。

在本书的配套网站,touch-interfaces.com上,你可以下载两个css文件:

eric meyer的reset.css文件。里面有几个用于“重置”的css样式。我强烈推荐使用它,因为从“重置”后完全清洁的环境开始,要优于不停地尝试修改兼容浏览器默认的样式。

样式表(birds.css)是加州鸟类网站专有的。birds.css由桌面版样式开始。你可能会认出这是一个非常简单的两栏流动布局。桌面版的内容区域是流动的,而包含导航按钮的侧边栏是固定的。

代码清单 2.3展示了这些基本的样式。

你可能会注意到,海鸥图像设置的max-width为100%,而封闭的容器(.hero-shot)具有相对宽度1。这是创建所谓响应式图像的最简单方式。也就是说,图像会自动按比例缩放到容器(即.hero-shot)的宽度。在这种情况下图像的宽度总是文本块的宽度的一半。

这种响应式图像技术有一个重大的缺点:用户的设备肯定要下载多余的字节。在下一章中,我们将重新审视图像的问题。

2.5.1 创建分界点

正如前面提到的,我们将在加州鸟类网站的移动版和桌面版中使用相同的html标记。设计上是基于这一点的,布局和设计都会调整,以适应用户的设备的大小。为此,我们可以创建分界点:宽度的像素值不同会触发样式的更改,来适应不同宽度的屏幕。对于加州鸟类网站,我们将创建两个分界点:平板电脑为800px,手机为480px。

也就是说,如果屏幕宽度是801px或以上,我们将应用样式表中的默认样式。我们将为屏幕宽度在481px到800px之间的平板电脑创建特殊的样式,为屏幕宽度为480px或更窄的手机创建额外的样式。

如果你以前从未这样做过,改变样式以适应屏幕宽度的想法听起来很可怕。值得庆幸的是,媒体查询(media queries)使人们可以创造出一个能自适应的样式,而不必使用javascript。

媒体查询

由于css2已被广泛的支持,开发者已经能够通过在link标签上设置不同的媒体查询值,来为不同的多媒体设备提供不同的样式表。通常情况下这个值都被用于规定一个单独的“打印”样式表,例如:

css3提供了更强大的语法,让你可以根据更多的条件过滤样式表,而不是只能根据媒体类型来过滤。媒体查询由一个媒介类型和其他表达式组成。解析后,媒体查询最终的结果是真或假。如果为真,则应用样式表。

媒体查询可以由一个布尔运算符开始。用“not”开始的话,会将字段最后解析出的结果取反,就像在javascript中使用“!”一样。最常见的,你可以用only操作符来开始。由于旧的浏览器无法解析only操作符,就可以有效地在旧浏览器上屏蔽掉只应用于现代浏览器的样式表。

接下来就是媒体类型了。在css 2.1规范中,有十个媒体类型,但只有print和screen被各浏览器广泛支持。在媒体类型后面,你可以指定一个表达式。对于加州鸟类网站,我们将根据屏幕宽度来改变样式。宽度特征可以采用任何有效的css单位(用任何css单位来指定)来达到过滤的目的。

例如,下面这条规则限制只有比较窄的屏幕才可应用该样式表:

下面这条规则限制只有比较宽的屏幕才可应用该样式表:

对于加州鸟类网站,我们用媒体查询来定义不同分支。因此,有三个样式表:

这里的像素值基于浏览器的报告。例如,在高清屏iphone的垂直方向上,就媒体查询而言,宽度返回的是320,而不考虑屏幕上的实际物理像素。

媒体查询真正伟大之处在于,我们不仅能通过外部的媒体属性使用它,还可以在样式表内部中通过@media指令使用它。

这个语法与媒体查询参数的语法是相同的。@media指令在大括号之间创建了一块区域。括号内的css只在规则返回true时被应用,否则浏览器将不理会里面的css。

2.5.2 创建额外样式

对于加州鸟类网站,我们会为宽度800px的浏览器和宽度480px的浏览器制作额外的样式。设计师又为平板电脑创造了另一个样式图,将导航移动到了顶部中间,以留出更多空间给正文。否则,样式应该是一样的(图2.6)。

《HTML5触摸界面设计与开发》——2.5 响应式的CSS

https://yqfile.alicdn.com/84db660fe32c72a4a64884f78ee3967a420af9e7.png" >

因为侧边栏最先出现在dom树中,我们只需通过给它设置相对位置(postion:relative)和自动宽度(width:auto)就可以将它放回文件流。然后就可以给container少许内边距(padding),如代码清单2.4所示。

桌面用户可以改变他的浏览器的大小,当桌面用户调整浏览器大小时,会发现随着调整到不同的宽度,可能会看到应用于手机和平板电脑的样式。如果你想让这些样式只适用于设备的物理宽度,可以使用max-device-width 或 min-device-width属性来设置。

正如你所看到的,样式通常伴随着媒体查询。手机版的样式如图2.2所示,它需要一个稍微不同的布局。代码清单2.5列出了手机版的样式。

完整的代码和代码清单2.5都可以在网站上找到。如果你在桌面设备上查看这个页面,你会发现当你调整浏览器窗口大小时,样式会发生变化。

继续阅读