响应式网站内容设计.pptx

响应式网站的内容设计主讲人：高洛峰妹子

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

真正具有响应性的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只定义“父”元素的尺寸。这个重要的不同点可以解决很多出现内嵌套的元素问题。大多数设计师都知道,绝大多数的设计本质上是包含嵌套的元素；然而，现在需要意识到的是rem是一个很新的单位，因此不是所有的桌面浏览器都支持，解释或者很好地显示它们，至少目前是这种情况的。

前面介绍的4种字体