响应式web开发

目录

什么是响应式

历史

背景

响应式开发原理（实现步骤）

1、设置 viewport

2 、创建流式布局（%）

2.1 模块布局响应

2.2响应式图片

2.背景图片处理

3、屏幕区间设定

响应式布局优缺点

---

什么是响应式

也叫响应式布局，响应式开发

响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式*

一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；

* 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同屏幕的目的

历史

此概念于2010年5月由国外著名网页设计师Ethan Marcotte(伊森·马科特)所提出意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。

 

背景

移动互联网的发展，为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生，目的：响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式开发原理（实现步骤）

---

1、设置 viewport

2 、创建流式布局（%）

响应式在设计和布局初期就要考虑页面如何在多终端展示，因此需要根据页面效果分析创建方便后续处理版式变化的流式布局

2.1 模块布局响应

对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）；

<