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

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

2.5 响应式的CSS

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

Eric Meyer的reset.css文件。里面有几个用于“重置”的CSS样式。我强烈推荐使用它,因为从“重置”后完全清洁的环境开始,要优于不停地尝试修改兼容浏览器默认的样式。
样式表(birds.css)是加州鸟类网站专有的。birds.css由桌面版样式开始。你可能会认出这是一个非常简单的两栏流动布局。桌面版的内容区域是流动的,而包含导航按钮的侧边栏是固定的。
代码清单 2.3展示了这些基本的样式。

代码清单2.3 基本样式

html {
   background: #fff;
   color: #000;
}

a {
  color: green;
  text-decoration: none;
}

p {
  margin-bottom: 10px;
}

h2 {
   font-size: 20px;
   margin: 4px;
}

i {
  font-style: italic;
}

.container {
  padding: 0 50px;
}

.bd {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif ;
}

.hero-img {
  max-width: 100%;
}

.nav-li {
  display: inline-block;
  background: #5e49ff;
  border: 3px solid #8a7bfd;
  width: 120px;
  margin-bottom: 10px;
}

.nav-li .nav-link {
  color: #fff;
  padding: 4px;
}

.header {
  width: 100%;
  height: 60px;
  background: #000;
  padding: 0;
  font-size: 38px;
  font-weight: bold;

}

.header .title{
  color: #fff;
  padding: 10px;
  text-align: left;
}

/* Allow the image to grow proportionally inside its container */
.hero-shot {
  width: 50%;
  float: left;
  margin-right: 10px;
}

.sidebar {
  position: absolute;
  padding: 10px;
  top: 60px;
  width: 150px;
}
.main {

  margin: 10px 10px 10px 150px;

}

.footer {
  width: 100%;
}

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

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

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

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

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

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

<!-- this stylesheet is for the screen -->
<link rel="stylesheet" media="screen" href="styles.css">

<!-- This stylesheet is for printing -->
<link rel="stylesheet" media="print" href="print-styles.css">

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

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

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

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

<link rel="stylesheet" media="only screen and (max-width: 480px)"
→ href="phone-styles.css">

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

<link rel="stylesheet" media="only screen and (min-width: 2000px)"
→ href="phone-styles.css">

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

<link rel="stylesheet" media="screen" href="birds.css">
<link rel="stylesheet" media="only screen and (max-width: 800px)"
→ href="tablet.css">
<link rel="stylesheet" media="only screen and (max-width: 480px)"
→ href="phone.css">

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

注:本章仅讲述了媒体查询的一些皮毛。可查阅Mozilla开发网络了解详细的语法解释(https://developer.mozilla.org/en-us/docs/Css/Media_queries)。另外,还可以在mediaqueri.es找到一些例子。
媒体查询真正伟大之处在于,我们不仅能通过外部的媒体属性使用它,还可以在样式表内部中通过@media指令使用它。

@media only screen and (max-width: 800px) {
  /* css that applies only in this case */
}

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

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


《HTML5触摸界面设计与开发》——2.5 响应式的CSShttps://yqfile.alicdn.com/84db660fe32c72a4a64884f78ee3967a420af9e7.png" >

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

代码清单2.4 平板电脑的样式

.container {
  padding: 0 10px;
}

.nav-li {
  width: auto; /* so all 
  the text fits */
}
.sidebar {
  position:relative; /* back in the flow */
  top: 0;
  width: auto;
  padding: 0;
  text-align: center;
}

.header .title {
  text-align: center;
}

.main {
  margin: 0;
}

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

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

代码清单2.5 手机版的样式

.container {
  padding: 0;
}

.main {
  margin: 0;
}

.content {
  margin: 10px 10px;
}

.nav-li {
  font-size: 12px;
}

.hero-shot {
  float: none;
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.header .title {
  font-size: 24px;
  text-align: left;
}

.hero-shot .caption {
  position: absolute;
  bottom: 5px;
  margin: 0;

}

.hero-shot .caption, .hero-shot .caption a {
  color: #000;
  color: rgba(255,255,255,0.5);
}

}

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

上一篇:ios开发学习-手势交互(Gesture)效果源码分享


下一篇:SAP Commerce Cloud ( 电商云 ) 路由路径的自定义配置与开发