响应式布局可以让网站同时适应不同的分辨率和不同的手机端，让客服端有更好的体验
方案一：百分比布局(流式布局，就是百分比布局，也称为非固定像素布局)
利用对属性设置百分比来布局，这里的百分比布局是相对应父元素；能够设置的属性有width、height、margin、padding，其他属性border、font-size（不能使用百分比，只能使用px）不能用百分比设置
注意：
1.当屏幕大于图片的宽度时，会进行拉伸,解决拉伸方法就是改为max-width:50%,但当屏幕大于图片的宽度时，两边会有空白。
2.导航栏是利用设置单栏 width:25%来设置不同的分辨率。
3.由于没办法对font-size进行百分比设置，所有最多还是使用在整个页面布局和图片上面。
方案二：使用媒体查询(css3 @media 查询)
利用媒体查询设置不同分辨率下的css样式，来设配不同屏幕。
注意：IE6、7、8不支持媒体查询。
方案三：rem响应式布局
当前页面中元素的rem单位的样式值都是针对于html元素的font-size的值进行动态计算的，所以有两种方式可以达到适应不同屏幕：
第一种利用媒体查询，在不同分辨率下给html的fotn-size赋值。
第二种利用js动态计算赋值
缺点：打开页面时候，元素大小会有一个变化过程。
方案四：vw、vh响应式布局
根据PSD文件宽度或高度作为标准，元素单位px转换成vw或vh，比如font-size:12px，PSD文件宽度375，转换公式12*100/375，则样式为font-size:3.2vw
rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;
vw:相对于视口的宽度。视口被均分为100单位的vw;
vh:相对于视口的高度。视口被均分为100单位的vh;
vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;
方案五：felx弹性盒子布局
利用flex数据来适应不同屏幕
flex-direction属性：决定主轴的方向（即项目的排列方向）;
flex-wrap属性：规定如果一条轴线排不下，如何换行；
flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row/no-wrap；
justify-content属性：定义了项目在主轴上的对齐方式；
align-items属性：定义项目在交叉轴上如何对齐；
align-content属性：定义了多根轴线的对齐方式；