新手教学-css响应式布局如何实现

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

方案一：百分比布局(流式布局，就是百分比布局，也称为非固定像素布局)

利用对属性设置百分比来布局，这里的百分比布局是相对应父元素；能够设置的属性有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