响应式网页设计

名词解释

• 响应式Web设计（Responsive Web Design=RWD）：

1. 由Ethan Marcotte提出。网页内容会随着访问它的视口及设备的不同而呈现不同的样式，使Web作品适配手机，平板，桌面电脑，让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小，输入方式，设备，浏览器功能）而变化。
2. 先针对小屏幕设计，再逐步扩展到针对大屏幕的设计。

• HTML（HyperText Markup Language）：超文本标记语言，页面内可以包含图片、音乐、程序等非文字元素。
  <标签 属性="值">

• HTML5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言HTML的第五次重大修改。相当于是HTML其中的一个版本。

• CSS3（Cascading Style Sheets Level 3）：通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体，大小，对齐方式等），图片的外形（宽高，边框样式，边距等）以及版面布局等外观显示样式。特性

• JavaScript：Web页面中的一种脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应时间的动态页面。在网站建设中，JavaScript用于为页面添加动态效果。

• view point-视口：浏览器中用于呈现网页的区域，视口通常不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。

• max-width：保证所有图片最大显示为其自身的100%

• 断点：某个宽度超过600像素时，跨过这个点布局就会发生显著变化。

RWD的三项组成科技

Ethan Marcotte提供 2010年5月25日

• 弹性网格布局（fluid grib）：弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，文本会根据屏幕缩放自动重排。如现在类似于淘宝、京东一类的电商web站或者手机app的页面。

下添加这行代码

标签的意思:按照设备的宽度来渲染网页内容。

详细例子请看《响应式Web设计HTML5和CSS3实战(第2版)》P6-7

• 弹性图片/媒体（flxible images）：不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。使图片随容器宽度自动缩放，对某些元素进行重排。如调整图片大小并将其放置一侧，或修改某些元素的字体大小和背景颜色。

img {
max-width：100% ;
}

详细例子请看《响应式Web设计HTML5和CSS3实战(第2版)》P8-10

• 媒体查询（media queries ）：视口超过600像素时，当前的页面布局存在被严重拉伸的问题。媒体查询会根据屏幕宽度来调整布局。

最小宽度媒体查询：
@media screen and (min-width:50em) {
/* 样式 */
}

详细例子请看《响应式Web设计HTML5和CSS3实战(第2版)》P10-15+第二章

---

为何需要"响应式网页设计"

statcounter

• 使用移动客户端浏览网页的用户越来越多（绿色）
  

  2017.02-2018.02 浏览客户端统计数据

• 以前固定宽度（通常为960像素），使用更大的显示屏两端会出现白边，因此要适配各种显示屏。

• 红色笔：360X640分辨率（为手机，安卓机占据偏多），呈上升趋势。

• 紫色线：1366x768分辨率（电脑），呈下降趋势。

  
  
  

  过去12个月的手机vs平板电脑vs桌面数据

• PC显示器的尺寸逐渐出现较大差别，在小浏览器移动设备中，不能完全显示页面，或是将页面缩小至适应移动设备尺寸大小，不能正常浏览，对于点击触点也有影响，很多人会选择放大页面，在进行浏览，整个页面就需要不停的拖动，给用户的体验不好。例如优酷：
  

因此 响应式网页设计优势：

1. 灵活性强，可以适应不同分辨率的设备

2. 方便快捷的解决多设备显示适应问题

3. 节省人力开发成本，不再需要有人特地维护PC页面，移动页面维护更少

4. 没有重定向

   

   没有重定向
   3&4参考此处

响应式网页设计缺点

1. 加载需要一定的时间
   在响应式设计中，需要下载一些看起来不必要的html/css，而且图片也没有根据设备调整到合适的大小，这些都是导致加载时间加倍的原因。现在很多访客都是没有耐心的，如果访问的网站过慢他们会毫不犹豫的关掉他。

2. 搜索引擎优化
   对于响应式的网站来说，为搜索引擎确定关键词可不是一件容易的事。相比客户端，移动用户更会采用不同的关键吃，修改标题相对于其他的事项比较困难。

3. 时间花费
   开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时更多。如果你想要一个响应式网站，最好从草图开始重新设计。

缺点参考此处

---

采用Web设计的网站

北京大学

电脑

iphone 7plus 414x736

没有采用Web设计的网站

优酷

电脑

Galaxy S5 360x640

iphone 7plus 414x736

iphone x 375x812

---

前端
前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

后端
网站后端也叫网站后台技术或者动态网站技术，静态页面的缺点是不能动态的改变页面上的内容和实现一些代码逻辑，比如我们要实现用户的注册登录验证、或者购物结算等，这些都是要代码逻辑来实现的，还有我们需要一个后台来往我们的网页添加一些消息新闻通知等，因为不是每一个网站的使用者都懂前端技术来来改变页面内容，而且这样也太不方便了，所以需要网站后台来实现这些功能，这些东西都是需要网站后台技术来实现的。常见的网站后端开发语言有asp、asp.net、jsp、php等。同时网站后台技术还包括数据库如MySQL、sqlserver等，数据库是用来存储后台数据的。

为何要分前后端

需要依赖后端方案的RWD
网页版，手机版等等分开服务，设计，产出页面

不需要依赖后端方案的RWD
网页版，手机版等等一起服务，设计，产出页面

参考文献

• [英]Ben Frain著 (2017) 《响应式Web设计：HTML5和CSS3实战（第2版)》. (奇舞团 译) 人民邮电出版社
• 《响应式网页设计》由Ethan Marcotte提供 2010年5月25日
  以CSS，Layout＆Grids，Mobile / Multidevice，Responsive Design，Interaction Design发布