1.5 案例：体验响应式布局中的图像与字体

1.5.1 案例展示

本例将使用响应式布局的思维方式，使用HTML5的结构元素定义5个盒子，当浏览器窗口尺寸不同时，页面会根据当前窗口的大小选择使用不同的样式，页面效果如图1-4所示。

1.5.2 案例分析

根据页面效果分析，可以看出页面一共定义了5个div容器，媒体查询中的断点设置语句如下。

当窗口宽度在1200px以上时，页头和页脚分别在页面的最上方和最下方整行显示，中间主体分为3列显示。

当屏幕宽度在768px以上、1199px以下时，中间的第3列隐藏。

当屏幕宽度在768px以下时，5个区块从上往下排列显示。在窗口大小各自不同的子样式区域中，可以继承全局的样式，只要重新设置需要改变的样式即可。

另外，有一些次要的区块内容为了页面摆放合适，可以隐藏它。例如，在屏幕宽度在768～1199px之间时，可以设置页面右侧布局的页面元素的display属性值为none，将其隐藏。

1.5.3 案例实现

本项目主要分3步来实现案例页面效果。

1．编写页面HTML代码

首先在head区域添加viewport代码，具体如下。

然后在body区域编写HTML的基本结构代码，具体如下。

2．依据页面HTML元素编写基本CSS代码

例如如下代码，依据HTML元素的基本页面效果设置元素的背景颜色、字体颜色、字体样式及默认高度等。

3．依据媒体查询编写响应式网页代码

依据媒体查询的原理编写响应式网页代码，如下。

1.5.4 案例拓展

响应式网页设计中需要注意如下几个优化技巧。

1．每屏完成一项任务

在针对移动设备进行设计时，应尽量安排每屏完成一项任务。尽管现在的手机设计越来越贴近大屏幕，每屏只完成一项任务也是很有必要的。这是因为在移动设备上，用户已经习惯了同时执行多项任务，也许他们在浏览网站的同时正和朋友聊天，这决定了移动端网站的界面必须保持简单直观，否则用户无法快速获取信息，无法完成与网站的交互。所以，应确保每屏的所有文本、图片、视频等元素都是聚焦于一点的，指向于某个特定任务，比如点击行为召唤按钮。这个技巧听上去可能很简单，但操作起来却是有很大难度的。

2．精简优化导航体系

用户能否沿着设计者想要的方向前进，会不会点击特定的按钮，这都取决于网站导航体系。一般而言，在大屏幕的计算机端，网站的导航菜单可以承载多个层级、十多个不同的菜单项；但是在移动端上，基于屏幕大小的限制，以及用户可能有的时间和耐心，导航体系最好清晰明了、足够精简。这意味着设计者只需要确定几个核心的导航菜单项，这可以从分析移动用户的相关数据着手：“最受用户欢迎的是哪几个页面？这些页面是网站的核心内容所在吗？设计者还希望用户点击哪些内容？”解决了这几个问题，网站的核心导航条目就基本确定了，这样一来精简移动端导航体系也会容易得多。

3．精简网站内容

当设计移动端的页面时，网站上的内容也需要删繁就简，这不仅能够让网站内容更快为用户所获取，还可以方便搜索引擎抓取，提高搜索引擎对网站的好感度。例如，计算机端网站的主页需要放置3张大图做幻灯片用，而移动端上可能只需要选择一张最重要的图片就好了。还有，在移动网站上应选择尺寸更加合理的图片，也要学会放弃一些不匹配移动端需求的Javascript动态效果。

4．增大文本字号

小屏幕并不意味着小文本。换句话说，正是因为屏幕变小了，网站文本的字体字号更应该适当增大，这样文本内容的可读性才会更高，网站的整体阅读体验才能有所提升。在移动端网站应该使用多大的字体，需要网站设计者根据实际情况确定。不过，通常来说，移动端文本每行的字数应该是PC端的一半左右。

5．图片的处理技巧

例如，在移动端上查看轮播幻灯片效果的时候，导航栏应尽量隐藏起来，需要的时候再显现。诸如左右切换按钮和标明浏览位置的圆点最好是在光标移动上去之后再显示，这样的设计不仅可以避免用户分心，而且能避免内容和导航元素之间的冲突，降低整体设计的混乱感。

避免使用大量肖像类图片，如果设计的图片库类似于网格布局，应尽量挑选横向或者方形的图片。这样的设计在兼容计算机端设计的同时，还可以让用户在小屏幕上更好地查看。肖像类的图片在手机屏幕上适合纵向浏览，如果横过来，图片会显得特别小，浏览会相当不方便，这种情况下，使用方形的图片会是很好的兼容性方案。响应式的图片库的设计需要考虑多种因素，请务必牢记用户的不同浏览场景。

在移动端上，手势操作触摸屏几乎已成为用户的本能。所以，在设计响应式图片库的时候，滑动等手势操作赋予了用户更多的权力，让体验更好。在移动设备上使用箭头导航太过于乏味、陈旧，反而手势交互更加自然，也更符合真实的交互体验。

Lightbox灯箱效果大概是计算机端网页上最常见的图片浏览模式，图片以弹出框的形式呈现，能随着屏幕尺寸和鼠标操作缩放。在产品展示页面当中，这种图片浏览模式的使用尤其广泛和频繁，但是在移动端上可能会引起大量用户体验方面的问题，例如盖住其他交互控件、无法退出、尺寸不合适等。