本篇文章中，我们将介绍在设计响应式网站过程中，保护层级和内容完整性的方法。
内容编排
在前文中使用媒介查询功能来重排页面元素，再深入一步，不光要考虑可用的空间，还必须照顾到内容。假设有一个4 栏的全宽网站，随着窗口变小，4 栏逐渐变成3 栏，再变成两栏，最后变为一栏，通常做法是把它们按顺序纵向堆叠起来。
现在要把页面重排和内容层级联系到一起。如果第一栏非常高怎么办？第二栏的内容一定不如第一栏重要吗？某些情况下，把元素整合到一起效果更好。下面介绍几种编排方式，看起来很像是20 世纪50 年代的舞蹈动作，哎，起名太难，就不要难为我了。用文章开头的新闻网站做例子吧，“天气”板块（包括花粉浓度）在右上角，在窄窗口中，这个板块不能被挤到左侧栏目的下边，而要紧贴“头条新闻”。
1．编组- 滑动
这种板块编组的方式是这样实现的：把需要编组的内容放进同一列中，然后
把页面其他内容放入另一列。
HTML 代码如下：
<div id="container">
<div class="row">
<div class="headlines col">
<p>Insert headline code here.</p>
</div>
<div class="weather col">
<p>Insert local weather here.</p>
</div>
</div>
<div class="row">
<div class="news col">
<p>Insert additional news stories here.</p>
</div>
</div>
</div>
CSS 代码如下：
.col {
fl oat: left;
display: inline;
}
.headlines {
width: 70%;
}
.weather {
width: 30%;
}
.news {
width: 70%;
}
@media screen and (max-width: 33.750em) {
.headlines {
width: 100%;
}
.weather {
width: 100%;
}
.news {
width: 100%;
}
}
2．滑动- 浮动
因为某些“讨厌鬼”不断投诉说查看不到花粉浓度，老板决定把“天气”放在单栏显示的最上方，要怎么实现呢？答案是使用媒介查询实现元素浮动。首先，要在HTML 代码中反映出页面层级的变化：
<div id="container">
<div class="row">
<div class="weather
col">
<p>Insert local weather
here.</p>
</div>
<div class="headlines col">
<p>Insert headline code here.</p>
</div>
</div>
<div class="row">
<div class="news col">
<p>Insert additional news stories here.</p>
</div>
</div>
</div>
CSS 代码如下：
.col {
fl oat: left;
display: inline;
}
.headlines {
width: 70%;
}
.weather {
width: 30%;
fl oat: right;
}
.news {
width: 70%;
}
@media screen and (max-width: 33.750em) {
.headlines {
width: 100%;
}
.weather {
width: 100%;
}
.news {
width: 100%;
}
}
搞定了！在宽度超过540 px(33.750 em) 的窗口中，“天气”板块会浮动到“头条新闻”右侧。
3．前前后后左左右右
前两个舞蹈动作解决了最小窗口的内容排版问题，下一招能更快捷地调整元素顺序。先来回顾一下初始HTML 代码：
<div id="container">
<div class="headlines col">
<p>Headlines</p>
</div>
<div class="weather col">
<p>Weather</p>
</div>
<div class="news col">
<p>News</p>
</div>
</div>
然后把CSS 代码改成这样：
container {
display: -webkit-fl ex;
display: fl ex;
}
.col {
fl ex: 1;
}
.headlines {
order: 1;
}
.weather {
order: 2;
}
.news {
order: 3;
}
@media screen and (max-width: 33.750em) {
#container {
fl ex-fl ow: column wrap;
}
.headlines {
order: 2;
}
.weather {
order: 1;
}
.news {
order: 3;
}
}
更改CSS 代码之后，调整数字就能改变元素的堆叠顺序了。
响应式图片层级
空间占用是体现层级的重要方面。简单来说，元素越大，用户就会认为它越重要。以图2.12 为例：
显而易见，上方的大横幅图片传递的信息更重要。在窄屏下，图片浮动后的效果是什么样的呢？大概如图2.13 所示。
这可不行啊！原定的视觉层级应该是横幅图片作为页面中的最大元素，比其他元素都重要。在窄屏窗口中，横幅图片只占据一小条空间，远比其余的图片寒酸。我的同事Dave Rupert 提出了解决方法，可以把横幅元素放进一个div 里，命名为.banner-item。通过min-height，height 和overflow:hidden 使之可以等比缩放。代码如下：
.banner-item {
overfl ow: hidden;
min-height: 300px; /* 300px is arbitrary. */
}
.banner-item img {
width: 100%;
}
/* 600px / 37.500em is about the width "locked in" at
*/
@media screen and (max-width: 37.500em) {
.banner-item img {
width: auto;
max-width: none;
height: 300px;
}
}
通过媒介查询功能，将图片高度保持在300px 以上，页面层级不受破坏。我们已经就自适应网格和页面布局聊了不少，下边该谈谈它们对文本和可读性的影响了。
自适应排版
保证网站全设备和全宽度的可读性也是我们的重要目标。要点之一在于控制每行的字数。在自适应布局中，文字排版与浏览器宽度有关：窗口越宽，每行字数越多。“网页字体元素”一文提及，每行45 ～ 75 字符（含空格）是用户普遍能够接受的舒适阅读范围，应当在设计过程中尽量避免单行文字过多的情况。首先，可以使用媒介查询调整容器的宽度。随着窗口变宽，可以减小容器宽度，强制文本分行。其次，还可以在宽窗口中增大字号。提供一个小技巧：在占位文本中放入两个星号，比如：
Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.
随着浏览器窗口宽度加大，如果两个星号出现在同一行中，就需要加大字号了。用百分比、em 或rem 作为度量单位的话，改变一个CSS 属性即可实现。
我很高兴地看到Josh Brewer 和Mark Christian 开发出名为Response Measure的jQuery 插件，可以自动生成适合给定宽度的字号。这个插件对处理段落文本而言非常合适，但如果想让文本像自适应图片一样，根据浏览器窗口宽度自动调整大小，应该怎么做呢？我在博客上提出了这个问题，好友Dave Rupert 开发了FitText，这款jQuery 插件可以用来调整网页字体，我们将其发布在了GitHub 上。Sean McBride 在这个网站给出了FitText 的使用实例。他将FitText 应用于h1标签，并将4 边内边距调整为5em, 40%, 2.5em 和5%。右侧40% 的内边距为图片的视觉焦点留出了位置。在文件头中添加了如下语句后，文本就可以自动适应容器的宽度了：
<script>
$(function() { $('.heading h1').fi tText(5.7) });
</script>
如果你喜欢FitText，那就一定要试试Mat Marquis 开发的Molten Leading，可以随宽度变化自动调整行高。也就是说，这款插件实现了自适应行高。还有更好的消息，FitText 可能会被vw，vh 和vmin 这套新度量单位淘汰，举例如下：
● 1 vw 表示窗口宽度的1%；
● 1 vh 表示窗口高度的1%；
● vmin 表示1vw 和1vh 中的较小值。
FitText 需要使用JavaScript，对应宽度要用百分比单位表示，这套新单位则可以独立使用。在获得浏览器支持之后，这套单位还能用来精确调整各种尺寸窗口中的文字。
基于代码的网页设计标准
在文本、按钮、导航和基本页面结构等基础元素设计完成后，最好建立一个汇总页面或站点，既为批量产出做准备，也有助于建立项目视觉标准和资源库。我把这个环节当做建立Twitter Bootstrap 的简化版，同时也是对应项目的“定制版”。实时开发环境中的设计实例是测试和改进网站的最佳途径。在我看来，用图片来展示响应式页面布局，就像在公园熙熙攘攘的人群里练习驾驶一样不得要领。
本文摘自即将在3月初上市的《众妙之门——移动交互体验设计》
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
