第七章 响应式网站的内容设计.pdfVIP

响应式网站的内容设计 基于响应式开发网站，除了页面的布局是我们设计的重点， 网站中显示的图片和 文字也是我们不能轻视的内容。 真正具有响应性的Web设计是完全调整您的网站以满足访问者的设备。 我们需 要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片， 我们可以准备多张不同尺寸的图片，然后在各自的媒体查询样式中使用对应的图 片背景即可。再能结合 一些 “min-width，min-height,max-width,max-height ”等 样式属性，来限制窗口最小或最大宽度和高度，模拟响应式及流式布局，从而保 证其图片不失真。 如果是在HTML中加载图片，实现图片在不同分辨率的屏幕上的适应，当然可 以通过设置图片样式的百分比来实现，但是，它不只是包括缩放，同样重要的是 减少你传送到观众的图片，比如说用户是处在移动设备中浏览您的网站，网速慢， 流量少等因素，可能访客会放弃您的网站！如果一个网站上的大多数数据元素都 是图像。为了减少这些元素给我们的网站带来的影响，我们可以用更合适的图片 为我们的访问者使用的设备替换其中的数据。在开发时解决这样的问题可以通过 一些JavaScript插件实现 响应式文字显示内容设计 响应式的设计应该秉承 “内容优先，移动优先”的设计原则，那么我们知道网页 中的内容主要是由文字图片等元素组成的，那么文字该如何响应式呢？排版是响 应式Web设计最重要的内容之一，如果你想内容能在所有尺寸屏幕上友好地显示， 那就绝对有必要地为移动设备优化字体，我们不能忽视指定字体来适应我们响应 式网站。我们可能使用不用单位标准来实现这个目标，包括pixel(像素)，em，rem 或者是百分比。那么选择一个正确的标准对设计一个可塑的，响应式的交互界面 是至关重要的。 Pixel(像素) 很早之前，Pixel （像素）就是被用作web设计的单位，原因就是它本身固有的精密度和准确度。一 旦字体赋具体的值，就能在所有设备以及浏览器中保持相同的大小。虽然这种方法提供了非常精确 的大小控制，但它却与我们需要的弹性和响应式相违背的。当你给一个 “父”元素设置尺寸时，通 过继承特性就会把尺寸 “传递”给 “子”元素(这就是为什么把CSS命名为 “层叠”样式表)。例如， 设置一个固定的像素值给body 的font-size，然后就会把这个值 “传递”给你设计的所有其他元素。 这时候，开发人员如果想单独地分配样式，那就必须手动地设置不同的参数去覆盖已存在的样式。 因此，基本编辑以及调整将需要小心翼翼地对所有预设样式进行修改。这会引发的不只是不方便的 问题，还会在各种浏览器和设备上出现显示不友好的问题，其中很多是由于选择字体大小而造成的。 很多读者是在特定字体大小的情况会出现阅读障碍的,而这些都是要被防止出现的，尤其是考虑到 我们响应式设计的目标是在所有的屏幕尺寸和视窗下很好的显示。如果你为设计采用前卫的方法思 想，那么精确的像素单位并不算是最好的选择。现在，设备有各种各样的屏幕尺寸，也就是说不同 的像素宽高的屏幕。使用一个特定大小的字体来适应所有的屏幕，那是跟我们的响应式设计相违背 的。 Em 一个em也是一个大小的单位，可以定义font-size的值大小。举个例子，如果我们 创建一个div包含font-size值为16px 的文本，那么1em就代表16px ，2em就等于 32px ，依此类推。em在所有浏览器中是可变化的，不需要去为每一个元素设置值， 因为CSS具有继承特性，也就是 “层叠”。很明显，使用em需要考虑优缺点。尽 管，使得维护网站的成本降低，但会阻碍开发人员正在寻求控制、精度和可预测 性的字体大小。幸运的是，这个问题可以很容易地被解决，通过为大部分内容使 用相同的计算单位，需要添加一些简单的文本元素，如header和footer。 百分比 类似em单位，百分比也是可变化的，可被继承的。理论上，两者是没有很大的区 别，都是计算单位。实际上，需要理解两者的区别是自己打算选择使用哪种计算 单位在你的设计上。你当然不想在指定的元素使用em，而在其他元素使用百分比。 例如，CSS声明： { font-size:100%; }，这样可以覆盖掉浏览器默认定义或者其他 不想要的百分比声明，在这里，可以使用em单位的。 Rem 还有另外一个选择提供弹性字体大小的单位：rem （root(根) Em）。这个rem跟 em很相似，不同的是，rem只定义 “父”元素的尺寸。这个重要的不同点可以解 决很多出现内嵌套的元素问题。大多数设计师都知道,绝大多数的设