响应式网页设计

什么是响应式网页设计？

响应式Web设计（Responsive Web Design, 简称RWD），是一种统一的解决方案，可以让Web作品适配手机、平板和桌面电脑。响应式的网站可以适应用户的屏幕大小，为今天和明天的设备都提供最佳用户体验。
——Ben Frain, Responsive Web Design with HTML5 and CSS3

• “响应式网页设计” 是Ethan Marcotte在2010年发明的，他发布了一篇同名文章用于介绍一种新的网页设计方案,运用三种已有的技术，弹性网格布局（fluid grid）、弹性图片/媒体（flxible images）、媒体查询（media queries），来实现网页的弹性设计。

三大实现技术

• 弹性网格布局 与固定像素布局不同，弹性网格布局会使网页布局因用户使用设备的屏幕大小而弹性地改变布局方式，以达到更好的排版、提高浏览体验。
• 弹性图片/媒体 指的是 图片或媒体信息可以因浏览器窗口大小的变化而变化其排列方式或大小，避免PC用户缩小窗口后图片过大、智能手机用户图片、媒体显示不全的情况。
• 媒体查询 CSS的媒体查询可以获取用户所用设备的分辨率信息，进而利用这部分数据为用户提供更适合其设备的网页布局。

响应式（Responsive）

• 响应式指的是网页会通过CSS的媒体查询获取用户使用设备的屏幕大小，因而调整布局，使得不同大小屏幕有不同的显示效果，以适应不同设备的

• 这样的好处就是可以让使用智能手机和平板的用户得到更好的上网体验，不会因网页页面过大导致难以阅读和点击。

• 没有经过响应式设计的网页在手机等较小屏幕的设备中就会引起很多操作上的困难。

为什么要用响应式设计

中山大学官网在PC浏览器中的显示

• 以 中山大学官网 为例，因为其主要用户都是电脑用户，很少有通过智能手机等移动设备进行浏览，所以其官网并没有运用响应式设计，但是当我们只能用手机查看网页时，这就无形中为浏览造成麻烦。

• 在上图我们可以看出，中山大学官网的设计在PC端的显示是完好的，能够提供良好的体验。

中山大学官网在安卓手机中的显示

• 再看看中山大学官网在安卓手机浏览器中的显示，页面布局没有明显的改变，但是因为手机屏幕比较小，我们用手指点击相关通知或者文章的时候就非常容易误触，影响使用效率和降低用户体验，作为官方机构的官网，这样的设计可以减少建设成本，一劳永逸。但是，如果是用于商业用途的网站，这样的网页设计在将来将是致命的。

• 天猫商城 就运用了响应式网页设计，在用户设备分辨率在改变时自动适应排版、扩大或缩小图片，以到达更好的用户体验，同时考虑横屏、纵屏的不同情况。

天猫商城在PC浏览器中的显示

天猫商城在安卓手机中的显示

• 在同一URL下，天猫商城显示了多种表现方式，既减少网页的设计成本，又提高了用户体验。

各种智能设备的市场占有率

过去的十二个月里，PC、平板、智能手机的市场占有率

从上图我们可以得知，目前智能手机的市场占有率高于PC，而且未来可能还会诞生更多的主流智能设备、单纯为PC端设计的网页必将会被淘汰。

响应式Web设计和前端后端的关系

前端 or 后端 设计？

• 前端设计主要是用户所使用的界面的设计，是用户所接触最多的部分，直接影响用户体验，所有网站的显示效果都是由前端设计完成的。

• 后端设计 是网页运行的数据库部分，是网页的骨架。

• RWD 中的 JavaScript 和 CSS 主要是负责网页的前端设计，JavaScript 用于设计动态网页，使用户可以通过官网得到想要的相关连接，引导用户流向所需要的内容。

• RWD 中的 HTML 就是 后端设计 所用的工具，是网页设计的基础。