关于响应式布局的常用解决方案对比可以看这篇文章

本篇文章对其进行了总结

1 媒体查询

使用 @media 媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。

css
@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

媒体查询的缺点是要写多套样式代码会很繁琐。

2. 百分比

百分比有两个明显的缺点：

1. 计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
2. 各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如 width 和 height 相对于父元素的 width 和 height，而 margin、padding 不管垂直还是水平方向都相对比父元素的宽度、border-radius 则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

3. rem

rem 单位都是相对于根元素 html 的 font-size 来决定大小的, 通过修改根元素的字体大小，就能通过 rem 实现响应式布局

改变根元素字体大小的方式有两种

1. 通过媒体查询修改
2. 通过 js 监听 window 的 onresize 事件修改（推荐）

rem 布局的缺点

1. 和根元素 font-size 值强耦合，系统字体放大或缩小时，会导致布局错乱；
2. 需要添加 js 代码(动态修改 font-size，让人难受)

4. vw/vh

css3 中引入了一个新的单位 vw/vh，与视图窗口有关，vw 表示相对于视图窗口的宽度，vh 表示相对于视图窗口高度。

绝大多数的浏览器支持 vw 单位，但是 ie9-11 不支持 vmin 和 vmax，考虑到 vmin 和vmax 单位不常用，vw 单位在绝大部分高版本浏览器内的支持性很好，但是 opera 浏览器整体不支持 vw 单位，如果需要兼容 opera 浏览器的布局，不推荐使用 vw。