什么是响应式设计

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

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

响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的

响应式布局

原理：

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

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

简单的说：

响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化

自适应：元素随着屏幕发生宽高大小变化

优缺点

优点：

• 1、减少工作量，网站、设计、代码、内容都 只需要一份，多出来的工作量只是JS脚本、CSS样式做一些改变

• 2、节省设计、开发、维护成本【不再特定的维护PC页面，移动页面】

• 3、面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题

缺点：

• 1、兼容问题（IE8以下不支持）

• 2、需要加载更多的样式和脚本文件

• 3、代码累赘，会出现隐藏无用的元素，加载时间加长

• 4、页面设计比较难于精确定位和控制

• 5、影响用户体验(一定程度上改变了网站原有的布局结构，会出现用户混淆的情况,)

Bootstrap框架、苹果官网和星巴克官网使用的响应式布局

响应式网站演示：SegmentFault 思否

2、响应式需要的技术 ：

1.设置视口标签

2.使用媒体查询

3.响应字体

4.响应图片

5.采用百分比

1、媒体查询

1、标签设置

meta标签的设置

1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小

<meta name="viewport" content="width=device-width, initial-scale=1.0">