响应式Web设计研究

【摘要】 本文主要讲述响应式网站的优势及实现步骤。

【关键字】 响应式网站（RWD，responsive

>> 响应式Web设计 支持移动终端的响应式Web设计与研究 响应式WEB交互设计浅析 响应式Web设计与实现 基于响应式Web设计的教务系统移动平台研究与建设 响应式Web移动学习资源的技术实现与设计研究 响应式Web的设计的关键技术研究 基于响应式WEB设计的移动图书馆服务模式研究 响应式Web设计关键技术及设计流程 响应式Web设计技术之UIKit框架 Bootstrap框架在响应式Web设计中的应用 响应式网页设计的研究 基于bootstrap响应式web前端分析 响应式Web设计档案移动信息服务新方式 响应式网页设计初探 基于Bootstrap的响应式网页设计 基于Bootstrap的响应式网页设计中断点研究 基于HTML5进行响应式Web应用的技巧 面向不同设备的响应式网页设计探析 Web安全测试用例设计研究 常见问题解答 当前所在位置：l）为例。对比此页在各种终端的显示就可以看出，手机版和pc的最大的区别就是菜单导航变了，主导航变成左上角一个小按钮，屏幕的第二行是当前页面导航，同时也是二级菜单导航。这样方便用户进行下一步操作，也不占用很大的屏幕空间，从而可以腾出更多的空间显示当前页面的主要内容。其次，就是同样在重要位置上突出申请信用卡的banner的重要内容。最后，选项卡的内容则仅显示标题，如果用户喜欢相关内容，就可以通过点击查看更多内容。这样既保证了内容的完整性，又保证了页面的简洁性，两全其美。而ipad因为屏幕介于pc和mobile中间，因此内容显示和pc差不多，只是菜单框架参考了mobile。所以说设计很重要，从一开始就要考虑好各种屏幕的适应性。

2、开发实现。

如果设计的时候充分考虑到相应式布局的问题，那实现阶段就变得容易的多。首先，媒体查询（media Queries）是响应式设计的核心；它能使我们根据设备的功能来设定相应的样式。这样就可以保证在不同的屏幕终端都能正确显示所需要的内容。第二，弹性机制。这部分内容包括弹性的网格，弹性的容器，弹性的图片和视频等。在响应式布局的设计理念中所有的图片和容器大小最好是以百分数来表示的，不能用固定的像素来设置。当然还要考虑下载流量的问题。在小的屏幕上不仅要同比缩小图片，更要让用户下载小的像素的图片或者像素低的图片即响应式图片。第三，字体。以前的普通网页字体都是以px来作为度量单位的，这样在手机端的文字就会变得非常小。CSS3引用了一个新的单位叫rem，他和em类很像，但比em更容易使用。因为em是针对父级元素来确定自身元素的大小，而rem却是根据根元素来确定自身大小的。但是不要忘记一点就是在网页的开始重置根元素的大小。

3、耐心的测试和修改。

因为要匹配所有的终端，因此在网站制作完毕后一定要耐心细致的测试，找几个代表性的设备进行测试（当然不可能测试完所有的设备）。发现兼容性问题及时反馈处理，这样就可以使得上线后的作品可以给用户一个良好的体验。

总之，开发响应式布局网站，虽然在一开始设计和制作的时候比单独制作普通的网站花费更多的时间和精力，但是比起制作几套网站来还是轻松得多。因此现在应用十分广泛，随着技术的更新现在也出现了很多支持响应式设计的框架，运用好可以大大加快开发速度 。