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

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

　　基于自适应响应式建设开发网站站点，除了网站页面的部署布局是我们设计规划的重点，网站站点中显示的image图片和纯文本文字也是我们不能轻视的信息内容。

　　1 自适应响应式image图片显示信息内容设计规划

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

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

　　2 自适应响应式纯文本文字显示信息内容设计规划

　　自适应响应式的设计规划应该秉承“信息内容优先，移动优先”的原则。我们知道，网页页面中的信息内容主要是由纯文本文字、image图片等元素组成的，那么纯文本文字该如何响应呢？排版是自适应响应式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的百分比，而不用作其他操作。管理维护是一个很大的问题，是需要你在设计规划中多多考虑的。

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

网站建设服务

悉知科技是一个有着12年经验的网站建设开发公司，品牌建站/外贸网站建设/谷歌营销推广/品牌营销策划，这些我们都能帮您搞定！

在线咨询

网站建设制作方案是什么 ? 报价多少钱 ?

获取建站报价