响应式网页设计

名词解释

什么是响应式Web设计？（简称“RWD")

响应式网站设计(简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。(1)
RWD是由Ethan Marcotte在A List Apart发表过一篇文章"Responsive Web Design"中提出的，文中援引了响应式建筑设计的概念：现出现了一门新兴的学科——"响应式架构(responsive architecture)"（2）

什么是HTML5？

HTML5全称超文本标记语言，是一种用于创建网页的标准标记语言

与Markdoow语法类似，但Markdown语法是轻量级标记语言，HTML5可以实现很多Markdown语法实现不了的东西，但学习成本相比Markdown语法也有大幅提升。

什么是CSS3？

CSS3（层叠样式表）是能够真正做到网页表现与内容分离的一种样式设计语言，相对于HTML5来说CSS3可以对网页中的对象的位置排版进行更精准的控制

简单来说就是一种网页排版工具，可以更加快捷的实现我们想要达到的网页效果，而不用在HTML5中敲一大堆代码。

为什么需要响应式网页设计？

市场调查机构 statcounter2016年份额数据.PNG

市场调查机构 statcounter2017年份额数据.PNG

由上面两张图可知自2016年10月中全球的手机浏览份额超过电脑后便一直领先，而手机的5，6英寸相比起电脑的24乃至30英寸的屏幕跨度可谓非常之大，而且除了屏幕大小外，屏幕的分辨率也是一个超大的跨度，在当今时代，既有使用4K屏幕的手机，也有使用720P的电脑显示屏，这样一来上网设备屏幕之间的差距也达到了前所未有之大。不过我们并非手无举措，我们的解决方案就是响应式网页设计，它可以使同一个网页同时适配多个设备和屏幕。(教科书第一页)

RWD的组成科技

• 弹性网格布局：一般情况下，网页的布局是有弹性的。也就是说你随便打开一个页面，缩放浏览器窗口，文本会根据屏幕缩放自动重排，但有些情况下整个网页会随屏幕的缩小而缩小，这样的话字体太小会影响客户在手机等小屏幕设备上的使用体验。
• 弹性图片/媒体：与弹性网格布局类似，一张图片如果像素过高则会使网页塞不下这张图片，或者是字体变得超小以适应图片显示，而弹性图片/媒体则可以对高像素图片进行缩小（超采样？）以适应文字和屏幕大小。
• 媒体查询

使用 媒体查询，你可以针对不同的媒体类型定义不同的样式。媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，媒体查询是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。（4）

采用响应式Web设计有多重要

举两个例子

B站在iPhone X上的表现(没采用响应式Web设计).PNG

• 可以看到B站由于没有采用响应式Web设计所以在iPhone X上显示的内容和在电脑上显示的一模一样在手机上看这么小的字必然会很辛苦

https://t.bilibili.com/

兰拓网页在iPhone X上的表现(采用了响应式Web设计).PNG

• 而兰拓网站采用了响应式Web设计所以在iPhone X上显示的是如使用App般丝滑的柔顺

https://m.irentals.cn/#/tabs/home

RWD和前后端的关系

首先我们要了解什么是前后端

前端：前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现（3）

后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

所以RWD与前后端的关系是

举个例子，前端是餐厅里的服务员，后端是餐厅里的厨师，如果没有了服务员的帮忙，厨师不管煮的菜有多好吃都不会有人品尝到，而服务员本身也要负责店里环境的维护，从顾客口中听取建议等一系列接触行为，而后端就负责把前端听到的菜品意见再进行处理，然后服务员再拿给顾客品尝，这就是一个简单的前端与后端循环的例子。而在RWD中也是这样的道理，前端负责展示，后端负责把前端展示出来的东西给做出来，简单来说就是看得见的前端，看不见的后端。

引用

1.https://baike.baidu.com/item/RWD/19266582?fr=aladdin
2.https://alistapart.com/article/responsive-web-design
3.https://baike.baidu.com/item/%E5%89%8D%E7%AB%AF/5956545?fr=aladdin
4.http://www.runoob.com/cssref/css3-pr-mediaquery.html