响应式网页设计简析.docxVIP

响应式网页设计简析摘 要：伴随着互联网飞速发展的今天，网页设计也呈现出翻天覆地的变化，设计师们需要摸索一些新的技巧和方法来优化网页设计，此时伊桑·马科特提出的响应式网页设计将我们带入一个全新的设计领域，在CSS与HTML5的理论实践基础上，与用户的艺术审美需求相融合，使得响应式网页设计脱颖而出。 响应式网页设计是针对不同尺寸移动设备而诞生的技术，该技术很好地解决了由于不同尺寸设备引起的错误问题。响应式Web设计的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。关键词：网页设计；响应式；智能1. 前言1.1 背景 据相关数据统计，截止到2016年至今，使用移动互联网的用户数量已是大幅增长，使用智能手机、平板电脑的用户已经大大超过桌面用户，越来越多的人更倾向于通过移动设备的方式访问互联网。怎么让网站兼容更多类型的设备使用已经成为越来越重要的问题，面对这种问题，响应式网页设计也因此应运而生。传统网页设计采用“固定页面及元素宽度，任何终端统一页面效果”的策略，无疑将造成网页在一些新兴移动终端上显示的文字极小、链接分布极密，用户需要在屏幕上不停操作来自主寻求较好的体验。面对这一弊端，网页设计师聚焦于“响应式网页设计”这一关键词，试图使用一套代码为各类终端设备提供不同的设计和体验。从先前“为固定设备设计网页”跨越到“响应式网页设计”是一个较难的过程。1.2 响应式原理 在CSS中，有一个不常用到的属性media。为了达到响应式设计的目的，让CSS根据屏幕宽度(例如 media screen only @(max-width:480px))，使用不同的CSS代码，从而达到自动调整页面DIV宽度的目的。当然，除了CSS，还可以使用JS对页面内容进行动态的调整，不过这个技术不是很流行。1.3 响应式网页的优势 (1)不同终端设备的出现，如智能手机、平板电脑等这些设备存在不同屏幕尺寸的问题，且新的屏幕尺寸设备的不断研发，在大小、功能甚至分辨率上都会发生变化。当用户从便携式电脑切换到ipad时，响应式网页即刻切换到相应的分辨率、图片尺寸和脚本。换言之，即网站能够自动响应用户的设备参数。拥有这样的响应式网页便无需对市场上每一种新的设备都进行不同的设计和开发。 (2)各种操作系统的出现，如Windows、Android、IOS等系统，它们之间相互兼容，解决跨浏览器的问题。现如今全球手机浏览器的使用量逐年上升，IE7的使用率不断下降。响应式设计能够根据用户的浏览器版本，既保证老版本的可响应性，又为高分辨率显示器提供相应的页面内容，使用户体验得到最佳效果。 (3)桌面版浏览器满足不同视口大小、旋转方向的需求。现在许多用户没有最大化他们的浏览器，对于屏幕本身有太多可调整的空间，如将浏览器视口调小，那么网站的布局就不能完整的呈现出来。随着iPhone、ipad和智能手机的流行，许多新的设备能够根据用户的行为在竖屏和横屏之间进行瞬间切换，而固定网页布局已不能适应众多设备的考验，但响应式网页能够根据不同视口，为现有及将来的各种设备做出快速响应，呈现出完整的页面布局。1.4 响应式网页设计的特点响应式网页设计是为了让浏览者使用不同设备时获得一致的用户体验而开发的，不只是针对移动设备。在互联网产品、技术和标准不断发展的过程中，响应式网页设计也是不断进化的，只有了解其利弊，才能更好地为用户服务。首先，响应式网页设计操作灵活，可以针对某个页面调整，而不必影响网站中的其他页面;其次，响应式网页设计适应性强，相对传统方法更容易调整以适应层出不穷的新设备;再次，响应式网页设计虽然在规划阶段有些耗时费力，但从长远看，却可以节省产品整体的开发维护成本，节约时间;最后，响应式网页设计可以促使产品在不同设备上保持视觉体验的统一性，维护品牌体验的一致性。响应式网页设计并非总是最合适的方法。有的网络服务商需要为大屏幕、固定位置用户和小屏幕、移动用户提供的内容差别非常大，两者的生命周期不同，动态效果和交互体验不同，以及移动定位、传感器和大数据带来的诸多因素，设计师就需要为不同用户的不同使用情境分别设计网站，然后通过媒介查询自动定位到适合的站点。2. 响应式网页设计概述2.1 响应式网页设计与原型 响应式网页设计是一种网页前端开发技术，它可以描述为，“兼顾多种不同设备屏幕尺寸、分辨率、系统平台和行为做出相应的调整和布局的显示机制”。原型（Prototype），也叫“原样”，是“模拟科学”中的一个术语。在心理科学中，由于很难对动作或心智活动认识清楚，所以一般沿用J?R?安德森的观点，把原型（Prototype）视为关于范畴的最典型的样例设想，即把“原型”视为外化的实践模式，或“