论文部分内容阅读
【摘要】在互联网技术飞速发展的时代背景下，人们在日常生活、工作及学习中，对于各种信息的录入、资料查询、视频制作等方面，都是利用多媒体方可完成。且在应用各种移动设备浏览网页时，对于画面的要求也越来越高。为此，这就要求所设计的网络，可较好地适应各种各样的终端设备，且确保用户体验效果良好。此次从响应式网页设计特点方面展开分析，深入了解响应式网页设计的优化及实现，以期为今后进行响应式网页设计提供相应的参考依据。
【关键词】响应式网页；设计；优化；实现
引言
现阶段，随着各种移动智能设备不断发展，人们可在任何一个终端页面上做相应的访问，包括：智能手机、电脑等。但需要注意的一点是，如何确保在同一个网站上访问，在不同的屏幕分辨率、设备上均能显示出较好的画面效果，且所访问的页面不会混乱，这就需做好网页的设计优化工作。对此，进一步了解响应式网页的设计的优化及其实现方法非常有必要。
1.响应式网页设计特点分析
响应式网页是EthanMarcotte于2010年所提出的一种网页设计，设计思路主要是按照用户在各种设备环境下所作出的响应，而后提出一个空间需按照环境与所存在的人的改变作出响应。页面设计和开发需按照用户自身行为、屏幕大小、设备使用环境等，做相应地响应及调整，最终实现一源多屏的效果。因响应式网页应用起来较便捷，在网络设计中应用较多，和以往的网络相比，响应式网页特点主要表现在以下几方面。
第一，响应式网页可较好地解决移动终端设备在显示时所出现的差异方面的问题，如果用户应用的分辨率不同，且应用较多设备来浏览响应式网页的过程中，页面可按照屏幕的尺寸及分辨率，重新排版，从而显示出更加好的页面效果。一般情况下，设计人员在设计网页时，会将关键内容放于首页，并先显示出来，余下的内容会按照一种（或多种）排序方法排列于屏幕之外，用户經滚动屏幕，即可浏览信息。第二，响应式网页的桌面版浏览器能够满足各种视口与旋转方向方面的需求。第三，以响应式所开发并优化设计的页面，能大大缩减页面的维护成本，在当前公众日常工作、生活及学习中，所应用的各种设备在平台上，仅需做好一个网页开发及维护，且更新网站数据过程中，不会出现独立网页平台数据更新不同步的状况。
2.响应式网页设计的优化分析
第一，将http的请求次数明显缩减，使用Ajax异步请求优化整个网页的内部操作，对于页面中短时间内不会发生改变的信息数据，可选取服务器端与前端的缓存做相应的数据保存，这可明显缩减数据的请求量，节省很多数据流量的同时，还能大大减少页面加载的时间。第二，将JavaScript代码、CSS做相应的压缩处理，也就是压缩简化JavaScfipt代码、CSS，这样能够减少页面大小，加快整个页面的加载速度加快。第三，环节Javascript库的负载量，针对移动端而言，jQuery较厚重，在这种情况下，可选取YUI、XUI、jQuery Mobile等轻量级的框架来优化设计响应式网页。第四，为减少响应式页面的加载时长，节省加载流量，在必要的情况下，可把响应式网页上面的文字图片一次加载完，并在加载网页的过程当中，以逐次加载网页的方式，如果用户对页面内容感兴趣，可滚动屏幕继续加载阅读。第五，设计人员选择GND来管理相关的页面资源，也就是分发各个网络上的内容，尽量把互联网内对数据传输速度、稳定性的影响因素避开，以便确保所传输内容完整、稳定。第六，设计人员在优化响应式网页内的图片时，需尽量避免应用display：none，这是因为很多刚学习响应式网页设计的人，会习惯性的使用display：none隐藏所要浏览的内容，这样会使得用户浏览网页的过程中，很多被隐藏的数据信息、内容等均会被请求，使页面加载速度减慢。例如，对某张内容图片应用jQuery中的data-img，可将背景图设置成backgroud-im-age：none，这种情况下，可避免产生请求。
3.响应式网页设计的实现分析
经对响应式网页特点、设计优化方法做上述分析，充分了解响应式之后，深入分析响应式网页设计的实现。据相关资料显示，丹·锡德霍姆所编写的《Web设计》一书中明确提到流动布局方面的内容，且提出相应的公示，表示为：目标元素宽度，上下文元素宽度=百分比宽度。具体实现方法包括以下几个方面。
3.1响应式网页的CSS媒体查询应用
在CSS媒体的查询应用过程中，由于所设定的min-width、maxwidth属性值，能够较好地调整各个网页，从而适应各种浏览设备的宽度范围，能够在不同屏幕的宽度超过所设定值的状况下，可以为页面设置一个特定样表，而后选取CSS媒体的查询功能，以针对各种视口的大小来匹配相对应的CSS样式。
3.2响应式网页弹性图片应用
首先，在应用响应式网页弹性图片的过程中，设计人员可对CSS max-width做相应的修复。而在移动无线网络快速发展的背景下，各种数据应用速度越来越快，且移动设备的应用也较普遍，已发展成公众浏览网页的核心方法之一。其次，大力推广并应用各种各样的网络产品，能够较好地转变用户应用屏幕较小的设备上网的习惯，这些移动设备内的各个浏览器，在优化设计过程中，设计人员需充分考虑如何在设备中显示当前的网页。而且，手机浏览器也会把一个标准的网页慢慢缩小至最小视口，而后用户浏览到所需要的内容区域，就可将网页放大浏览。最后，在对响应式网页优化设计后，尽管响应式网页的体验效果较好，但很多设计人员为追求画面最优、浏览速度最快，且消耗流量较小等，还会一直优化整个响应式网页。例如，设计人员对响应式网站做较好地维护，这是因为一个响应式的网站维护过程中，所需成分非常低，且在全部类型的移动设备上，仅需一个网站就能工作，这在很大程度上，能够大大缩减响应式网页内相关网站的工作量。
3.3响应式网站链接LOGO的实现
响应式网页的网站链接LOGO，能够实现由一个网站直接链接至另外一个网站，用户可以在较多的网站当中，找寻自己需要的各种网站，而且一个网站的内容LOGO、网站类型LOGO将起到重要作用。在设计响应式网站的链接LOGO的过程中，一般情况下，把一个普通图形LOGO与动态链接的LOGO进行较好地结合，同时对比两个LOGO的动态链接，则能够吸引公众的注意力。因GIF大力支持Internet使用标准，且支持没有损耗的压缩及透明度，比较容易创建，所以，在大多数网站的链接LOGO设计过程中，均选取GIF格式。而且GIF的格式网站的链接LOGO，很多都是选用帧动画，通过帧动画的一帧、一帧展示，可使屏幕效果更加清晰，且所展示出的动画较灵活，能够将所要表达的内容充分展示出来。
【关键词】响应式网页；设计；优化；实现
引言
现阶段，随着各种移动智能设备不断发展，人们可在任何一个终端页面上做相应的访问，包括：智能手机、电脑等。但需要注意的一点是，如何确保在同一个网站上访问，在不同的屏幕分辨率、设备上均能显示出较好的画面效果，且所访问的页面不会混乱，这就需做好网页的设计优化工作。对此，进一步了解响应式网页的设计的优化及其实现方法非常有必要。
1.响应式网页设计特点分析
响应式网页是EthanMarcotte于2010年所提出的一种网页设计，设计思路主要是按照用户在各种设备环境下所作出的响应，而后提出一个空间需按照环境与所存在的人的改变作出响应。页面设计和开发需按照用户自身行为、屏幕大小、设备使用环境等，做相应地响应及调整，最终实现一源多屏的效果。因响应式网页应用起来较便捷，在网络设计中应用较多，和以往的网络相比，响应式网页特点主要表现在以下几方面。
第一，响应式网页可较好地解决移动终端设备在显示时所出现的差异方面的问题，如果用户应用的分辨率不同，且应用较多设备来浏览响应式网页的过程中，页面可按照屏幕的尺寸及分辨率，重新排版，从而显示出更加好的页面效果。一般情况下，设计人员在设计网页时，会将关键内容放于首页，并先显示出来，余下的内容会按照一种（或多种）排序方法排列于屏幕之外，用户經滚动屏幕，即可浏览信息。第二，响应式网页的桌面版浏览器能够满足各种视口与旋转方向方面的需求。第三，以响应式所开发并优化设计的页面，能大大缩减页面的维护成本，在当前公众日常工作、生活及学习中，所应用的各种设备在平台上，仅需做好一个网页开发及维护，且更新网站数据过程中，不会出现独立网页平台数据更新不同步的状况。
2.响应式网页设计的优化分析
第一，将http的请求次数明显缩减，使用Ajax异步请求优化整个网页的内部操作，对于页面中短时间内不会发生改变的信息数据，可选取服务器端与前端的缓存做相应的数据保存，这可明显缩减数据的请求量，节省很多数据流量的同时，还能大大减少页面加载的时间。第二，将JavaScript代码、CSS做相应的压缩处理，也就是压缩简化JavaScfipt代码、CSS，这样能够减少页面大小，加快整个页面的加载速度加快。第三，环节Javascript库的负载量，针对移动端而言，jQuery较厚重，在这种情况下，可选取YUI、XUI、jQuery Mobile等轻量级的框架来优化设计响应式网页。第四，为减少响应式页面的加载时长，节省加载流量，在必要的情况下，可把响应式网页上面的文字图片一次加载完，并在加载网页的过程当中，以逐次加载网页的方式，如果用户对页面内容感兴趣，可滚动屏幕继续加载阅读。第五，设计人员选择GND来管理相关的页面资源，也就是分发各个网络上的内容，尽量把互联网内对数据传输速度、稳定性的影响因素避开，以便确保所传输内容完整、稳定。第六，设计人员在优化响应式网页内的图片时，需尽量避免应用display：none，这是因为很多刚学习响应式网页设计的人，会习惯性的使用display：none隐藏所要浏览的内容，这样会使得用户浏览网页的过程中，很多被隐藏的数据信息、内容等均会被请求，使页面加载速度减慢。例如，对某张内容图片应用jQuery中的data-img，可将背景图设置成backgroud-im-age：none，这种情况下，可避免产生请求。
3.响应式网页设计的实现分析
经对响应式网页特点、设计优化方法做上述分析，充分了解响应式之后，深入分析响应式网页设计的实现。据相关资料显示，丹·锡德霍姆所编写的《Web设计》一书中明确提到流动布局方面的内容，且提出相应的公示，表示为：目标元素宽度，上下文元素宽度=百分比宽度。具体实现方法包括以下几个方面。
3.1响应式网页的CSS媒体查询应用
在CSS媒体的查询应用过程中，由于所设定的min-width、maxwidth属性值，能够较好地调整各个网页，从而适应各种浏览设备的宽度范围，能够在不同屏幕的宽度超过所设定值的状况下，可以为页面设置一个特定样表，而后选取CSS媒体的查询功能，以针对各种视口的大小来匹配相对应的CSS样式。
3.2响应式网页弹性图片应用
首先，在应用响应式网页弹性图片的过程中，设计人员可对CSS max-width做相应的修复。而在移动无线网络快速发展的背景下，各种数据应用速度越来越快，且移动设备的应用也较普遍，已发展成公众浏览网页的核心方法之一。其次，大力推广并应用各种各样的网络产品，能够较好地转变用户应用屏幕较小的设备上网的习惯，这些移动设备内的各个浏览器，在优化设计过程中，设计人员需充分考虑如何在设备中显示当前的网页。而且，手机浏览器也会把一个标准的网页慢慢缩小至最小视口，而后用户浏览到所需要的内容区域，就可将网页放大浏览。最后，在对响应式网页优化设计后，尽管响应式网页的体验效果较好，但很多设计人员为追求画面最优、浏览速度最快，且消耗流量较小等，还会一直优化整个响应式网页。例如，设计人员对响应式网站做较好地维护，这是因为一个响应式的网站维护过程中，所需成分非常低，且在全部类型的移动设备上，仅需一个网站就能工作，这在很大程度上，能够大大缩减响应式网页内相关网站的工作量。
3.3响应式网站链接LOGO的实现
响应式网页的网站链接LOGO，能够实现由一个网站直接链接至另外一个网站，用户可以在较多的网站当中，找寻自己需要的各种网站，而且一个网站的内容LOGO、网站类型LOGO将起到重要作用。在设计响应式网站的链接LOGO的过程中，一般情况下，把一个普通图形LOGO与动态链接的LOGO进行较好地结合，同时对比两个LOGO的动态链接，则能够吸引公众的注意力。因GIF大力支持Internet使用标准，且支持没有损耗的压缩及透明度，比较容易创建，所以，在大多数网站的链接LOGO设计过程中，均选取GIF格式。而且GIF的格式网站的链接LOGO，很多都是选用帧动画，通过帧动画的一帧、一帧展示，可使屏幕效果更加清晰，且所展示出的动画较灵活，能够将所要表达的内容充分展示出来。