如何实现自适应布局

响应式网页设计是一种新的网站设计模式，从此构建的网站可自动适应不同的的访问设备，方便用户阅读和导航浏览，减少用户的放大/缩放/滑动的操作，提升良好的用户体验。

百分比布局

可以通过对属性的设置百分比来适配不同的屏幕，但是需要注意的是百分比是相对于父元素的。

使用媒体查询（CSS3@media查询）

利用媒体查询设置不同分辨率下的CSS样式，来适配不同的屏幕。

body {
 background-color: grey;
}
@media screen and (min-width: 1200px) {
 body {
   background-color: red;
 }
}
@media screen and (max-width: 750px) {
 body {
   background-color: green;
 }
}

媒体查询相对于百分比布局，可以对布局进行一个更细致的调整，但是需要在每个分辨率下面都写一套css样式，分别率的拆分还需要根据具体情况来定。

rem响应式布局

当前页面中元素的rem单位的样式值都是针对于html元素的font-size的值进行动态计算的，所以有两种方法可以达到适配不同的屏幕。

1. 利用媒体查询，在不同分辨率下给HTML的font-size赋值；
2. 利用js动态计算赋值。

// 动态设置rem值
(function(doc,win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            if(clientWidth > 750) clientWidth = 750;
            docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
        };
        if(!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContent',recalc,false);
})(document,window)

缺点就是打开页面的时候，元素大小会有一个变化过程。

vw响应式布局

vw和vh是视口（viewport units）单位，
何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw =
18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。 vh就是可视窗口的高度了。
vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个。

flex弹性布局

.parent {
  display: flex;
}
.child{
  flex: 1;
}