首先是META标签　　

　　　　<mate name="viewport" content="width=device-width, initial-scale=1"/>

　　　　这是一个方法，meta是一个插入标签

　　　　名字等于内容名字，宽度等于设备宽度放大倍数默认是一

　　　　第二个是百分比布局。

　　　　　百分比布局上的原理是尽量不要使用px使用百分比字体使用rem and em 其实百分比布局的优势就是代码傻少跨平台比较多，缺点就是用百分比布局的时候把一些布局的盒子套盒子套的较多百分比数不好调太墨迹，

第三种就是媒体对像，对象用最大宽度和最小宽度 

@media all and (min-width:900px )

这个是最小宽度

all是全部

and是或

screen  电脑屏幕

tv  电视

  handheld 移动端

andscape or portrait  屏幕方向

第四个就是弹性盒子  属性就是display box

这个就要去解决兼容性  webkit  moz  ms o  这四个分别代表 谷歌 火狐  IE 欧鹏四大浏览器内核的前缀CSS3很多属性需要加可恶的前缀，我对于弹性盒子用的不多，等用的熟练了再做解析，

第五个就是 h5 css3   javascript 的框架bootstrap 框架我想大家不应该陌生吧，他的优点是使用方便缺点是DOM加载慢 http请求多

建议原形编写

深度剖析响应式布局原理和方法