响应式布局如何实现

响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好的体验。

1， 百分比布局

利用对属性设置百分比来适配不同屏幕，百分比是相对于父元素。
能设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的

2，使用媒体查询（css3 @media 查询）

当前媒体查询可以监测的设备有 屏幕，打印机，屏幕阅读器

Screen 屏幕    print打印机   speech 查询屏幕阅读器

写法： @media screen and (max-width: 700px){}

@media all{}  查询所有的设备，监听所有的设备对监听器的压力比较大
注意：IE6、7、8 不支持媒体查询

3，rem响应式布局

字体大小单位有两种，px就是绝对单位，除了px其他的单都叫相对单位

​ rem是根据根元素来设置字体大小，尺寸会根据根元素的字体大小变化的单位，

​ 对html 元素的font-size 的值进行动态计算的，有两种方法可以实现

​ 第一种是使用媒体查询，在不同分辨率下给html的font-size赋值

​ 第二种使用js动态计算font-size的值

// 设置动态rem布局
(function(doc,win){
    var docEl = doc.documentElement,
    resizeEvt="orientationchange" in window ? "orientationchange" :"resize",  //兼容问题
    recalc = function(){
        if(docEl.clientWidth > 750){
            docEl.style.fontSize= "100px";
            doc.getElementById("app").style.width = "750px";
        }else{
            var width = docEl.clientWidth / 7.5;
            docEl.style.fontSize=width + "px";
            doc.getElementById('app').style.width="auto";
        }
    }
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt,recalc, false);
    doc.addEventListener("DOMContentLoaded",recalc, false);
})(document, window)

也有简单的，比较好记（适合偷懒）

function rem() {
var  vw =document.documentElement.clientWidth;
    document.documentElement.style.fontSize = (vw / 7.5 )+ "px";
}
rem();
window.onresize = rem;

4，flex弹性布局 （将盒子转换为弹性盒子 display: flex）

常见的属性有：

flex-direction: 设置项目的排列方向 column纵向排列，row横向，row-reverse , column-reverse
flex-wrap: 是否换行，wrap-reverse表示倒转换行，wrap，nowrap
Justify-content: 在主轴上的对齐方式，
		flex-start 左对齐，
		flex-end：右对齐 
		center居中  
		space-between 两端对齐，项目之间间隔相等
		space-around  每个项目两侧相等
Align-items  主轴的垂直方向的对齐方式
		Flex-start  起点对齐
		Flex-end   终点对齐
		Center  中点对齐
		Stretch:   默认铺满全屏 
Align-content  在多跟轴线的对齐方式，等同于align-items
		禁止缩小放大  flex-shrink: 0;  禁止缩小 flex-grow 禁止放大 

子元素（项目）的属性
order  项目的排序顺序，数值越小，越靠前
flex-grow  项目的放大比例
flex-shrink  项目的缩小比例
flex-basis  在分配多余空间前，项目占据的主轴空间
flex  是flex-grow, flex-shrink, flex-basis的简写
align-self 单项目与其他项目不同的对齐方式