响应式网页设计的定义、方法及特点-网页设计论文-计算机论文
——文章均为WORD文档，下载后可直接编辑使用亦可打印——
互联网已经渗透到人们日常生活的方方面面，台式机、笔记本、平板电脑、智能手机等设备日新月异，如何在不同厂家、不同型号的产品上呈现适合的信息以使用户获得一致的体验，是每个互联网内容开发商长期面临的难题。
早期，开发人员需要为电脑和移动智能设备分别设计内容和样式，针对不同用户分别定向，耗时费力。随着移动终端的飞速发展，为支持多种设备且节省网站的开发时间及维护成本，响应式网页设计逐渐成为主流设计。
一、响应式网页设计的意义
传统网站在不同客户端展现一样的内容，小屏幕显示细小紧密的文字和链接，用户不得不在手持设备的小屏幕上不停地滑动手指放大页面阅读信息、缩小页面查信息，横屏竖屏来回切换，页面中提供交互的视觉元素需要多次放大才能适合手指操作。例如，传统网站中的用户登录或注册区块。
移动用户首先需要在密集的信息中到它，随后通过手指操作多次放大这个区域，同时，在放大过程中注意不要触及到其他链接或按钮，然后把光标落实在文本域进行输入，最后移动到确认按钮处单击。此
外，传统网站的文件量在移动网络环境中下载速度较慢，并且有些媒体内容不适应移动端浏览器的要求而不能正常显示。
随着智能设备的开发，基于台式机、平板电脑、智能手机，屏幕分辨率、尺寸、材料、显示方式，系统、浏览器、脚本支持等软件硬件带来的不同，用户都希望获得一致的网络体验，让产品迎合用户的需求，而不是让用户烦乱地适应产品。响应式网页设计是以用户为中心的设计实践。早在2012 年，谷歌公司就指出，响应式设计是优化移动网站的最佳方式。不单是移动互联网，在品牌和服务的整体推广营销策略中，这一设计方法不断地巩固，成为整个互联网行业的
发展战略之一。
二、响应式网页设计的定义
2010 年，Ethan Marcotte 提出响应式网页设计(ＲWD，Ｒesponsive Web Design)，其实，这并不是一项新技术，而是已有技术媒介查询( MediaQueries)、流式布局( Fluid Grids)、自适应图片(Scalable Images)的有机组合。随着技术标准的扩展，这三项技术(媒介查询、流式布局、自适应图片)虽然仍是响应式网页设计的核心，但并不是全部。响应式网页设计无论从观念还是技术都正在经历着优胜劣汰的进化过程。
响应式网页设计，是指根据用户的使用设备，使用情境以及使用行为来调整网页的版式、内容、功能和交互方式的设计方法。响应式网页设计为适应多样的浏览情况而设计更流畅、更灵活的页面，达到良好设计实践，为用户提供更优化的体验。
网站制作论文三、响应式网页设计的方法
响应式网页设计是以用户为中心的设计，关注特定情境下的用户体验，它既要适应设备的功能和限制又要适应用户的使用环境。响应式网页设计的方法主要包括以下几个方面。
(一)移动优先(Mobile First)
在网站策划与制作的初步阶段，响应式技术比常规方法费时耗力。一般来讲，开发人员需要了解用户设备及不同使用情境，优先从移动端开始设计，从创建具有一定可用性的基本体验开始，满足用户简洁、顺畅的情境需求。然后，渐进增强，布局显示内容，提高图片质素，增加必要的服务，提供恰当的交互，创造更丰富的体验。移动优先采用渐进增强(Progressive Enhance-ment)原则，而非早期网站设计提倡的优雅降级(Graceful Degradation)原则。移动优先既可以为不支持媒介查询的移动设备提供适合的布局，聚焦当下最重要的事，也可以降低CSS 代码复杂性，减少冗余代码。
(二)媒介查询(Media Queries)
媒介查询是指根据用户特定情境，查询设备各种属性来布局样式和内容。测试的属性包括：设备屏幕宽高(device-width，device-height)；视窗显示区域的宽高(width，height)，例如浏览器窗口的大小；屏幕方向媒体特性决定一个设备是处于横屏还是竖屏，即设备处于垂直或水平的状态(orienta-tion)，宽长比例等特性(aspect －ratio)；设备屏幕分辨率(resolution)，每平方英寸像素数(ppi)，一般的屏幕为163ppi，视网膜(Ｒetina)屏为326ppi。这些属性可以通过与或非等逻辑运算符形成复杂的表达式，以此判断是否为特定目标设备类型，从而加载特殊样式、调整页面布局、提供适合的功能和交互。
(三)流式布局(Fluid Layouts)
传统的固定宽度(Fixed Width)布局以像素为单位，是网页布局中最常见的方法，它简单粗暴地固定了页面的宽度，使用户在不同设备上浏览相同的页面。屏幕较大时，页面两侧出现大片的空白区域未加利用；屏幕较小时，页面内容位置不变，用户只能不断地通过手指滑动进行浏览和界面交互。流动宽度(Fluid Width)布局的单位是百分比。
流动布局根据浏览器窗口宽度自动调整页面布局，不会出现

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。