响应式布局(介绍)

在讲解响应式布局之前首先我要先向大家介绍一下,什么是响应式布局.

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

自适应布局给了你更多的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础知识。当然，要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的，但是你至少可以很轻松的确定它是能够正常工作的，因为页面的基本特性和布局结构都是根据语义结构来部署的

响应式布局

1：使用相对单位 % rem vh vw
2: 使用媒体查询，相当于在不同情况下令写了一套CSS样式
3： 借助UI 框架；因为UI是别人封装好的响应式。希望有一天你们可以做封装框架的

响应式：根据不同的设备、不同的宽度、不同的特性、对页面上内容的样式做出相应的调整

当值给百分比的时候，根据谁来计算
width 根据父级的宽度来来计算
height 根据父级的高度
margin 始终根据父级的宽度来计算
top 根据（定位_绝对定位）父级的高度来计算
left 根据（定位_绝对定位）父级的宽度来计算
padding根据父级的宽度来计算
translatX,Y 根据自身的宽高来计算
行高的表示方法 ： font:20px/1.2 ‘宋体’; 表示文字大小的1.2倍

这些便是响应式布局