IT兄弟连 HTML5教程 响应式网站的内容设计

基于响应式开发网站，除了页面的布局是我们设计的重点，网站中显示的图片和文字也是我们不能轻视的内容。

1  响应式图片显示内容设计

真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片，我们可以准备多张不同尺寸的图片，然后在各自的媒体查询样式中使用对应的图片背景。再结合min-width、min-height、max-width、max-height等样式属性来限制窗口最小或最大宽度和高度，模拟响应式及流式布局，从而保证图片不失真。

如果是在HTML中加载图片，使图片适应不同分辨率的屏幕，则可以通过设置图片样式的百分比来实现。但是，它不仅包括缩放，同样重要的是减少传送给观众的图片。比如说用户是在移动设备中浏览网站，由于网速慢、流量少等因素，访客可能会放弃访问。为了减少这些元素给网站带来的影响，我们可以用更合适的图片替换访问者使用的设备中的数据。在开发时可以通过一些JavaScript插件来解决此类问题。

2  响应式文字显示内容设计

响应式的设计应该秉承“内容优先，移动优先”的原则。我们知道，网页中的内容主要是由文字、图片等元素组成的，那么文字该如何响应呢？排版是响应式Web设计最重要的内容之一，如果想让内容在所有尺寸的屏幕上友好地显示，那就绝对有必要为移动设备优化字体。我们可以使用不用单位的标准来实现这个目标，包括pixel（像素）、em、rem或者百分比。选择一个正确的标准对设计一个可塑的、响应式的交互界面是至关重要的。

1．pixel（像素）

很早之前，pixel（像素）就是被用作Web设计的单位，原因就是它本身固有的精密度和准确度。一旦字体赋予具体的值，就能在所有设备及浏览器中保持相同的大小。虽然这种方法提供了非常精确的大小控制，但它却与我们需要的弹性和响应式相违背。当你给一个“父”元素设置尺寸时，通过继承特性就会把尺寸“传递”给“子”元素（这就是为什么把CSS命名为“层叠”样式表）。例如，设置一个固定的像素值给body的font-size，就会把这个值“传递”给你所设计的所有其他元素。这时候，开发人员如果想单独地分配样式，就必须手动地设置不同的参数去覆盖已存在的样式。因此，基本编辑及调整将需要小心翼翼地对所有预设样式进行修改。这将引发的不只是不方便的问题，还会在各种浏览器和设备上出现显示不友好的问题，其中很多是由于选择字体大小而造成的。很多读者是在特定字体大小的情况下出现阅读障碍的，而这些都是要被防止出现的，尤其是考虑到我们响应式设计的目标是在所有的屏幕尺寸和视窗下很友好地显示。如果你的设计采用前卫的方法，那么精确的像素单位并不算是最好的选择。现在，设备有各种各样的屏幕尺寸，也就是不同像素宽高的屏幕。使用一个特定大小的字体来适应所有的屏幕，与我们的响应式设计是相违背的。

2．em

em也是一个表示大小的单位，可以定义font-size的值大小。举个例子：如果我们创建一个div包含font-size值为16px的文本，那么1em就代表16px，2em就等于32px，以此类推。em在所有浏览器中是可变化的，不需要为每个元素设置值，因为CSS具有继承特性，也就是“层叠”。很明显，使用em需要考虑优缺点。尽管使用em使得维护网站的成本降低，但会阻碍开发人员正在寻求控制、精度和可预测性的字体大小。幸运的是，这个问题可以很容易地被解决，通过为大部分内容使用相同的计算单位，还需要添加一些简单的文本元素，如header和footer。

3．百分比

类似em单位，百分比也是可变化的、可被继承的。理论上，二者没有很大的区别，都是计算单位。实际上，需要理解二者的区别是自己计划使用哪种计算单位。你当然不想在指定的元素使用em，而在其他元素使用百分比。例如，CSS声明{ font-size:100%; }，这样可以覆盖浏览器默认定义或者其他不想要的百分比声明，在这里，可以使用em单位。

4．rem

还有另外一个提供弹性字体大小的单位：rem（root Em）。这个rem与em很相似，不同的是，rem只定义“父”元素的尺寸。这个重要的不同点可以解决很多出现内嵌套的元素问题。大多数设计师都知道，绝大多数的设计本质上是包含嵌套的元素。然而，现在需要意识到的是，rem是一个很新的单位，因此不是所有的桌面浏览器都支持、解释或者很好地显示它们，至少目前是这种情况。

前面介绍的4种字体的计算单位，究竟哪一种更加适合响应式Web设计呢？可以确定的是，em使得字体更加容易缩放和维护。如果你打算使用百分比来增加字体大小，你将可能去改变应用于body的百分比，而不用作其他操作。维护是一个很大的问题，是需要你在设计中多多考虑的。