由于设备的分辨率不同，我们就用响应式布局来解决设备分辨率不同的问题，常见的解决方法有px视口、媒体查询、百分比、rem、和vw/vh等方法来实现响应式布局。接下来介绍下个种方法。

一、px和视口

在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。

那么什么是像素？

像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。

css像素：为web开发者提供，在css中使用的一个抽象单位。

物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

什么又是视口呢？

广义的视口，是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口

二、媒体查询

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

@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;
    }
}

通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

三、百分比

想要用百分比就必须要先了解是谁的百分比。

直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height百分比相对于height，width百分比相对于width。

当然也有特殊的不是相对于直接父元素的，以下是特殊的情况：

1、子元素的top和bottom、left、right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度

2、padding和margin都是只相对直接父元素的width。

3、border- radius是相对于自身的宽度。

百分比的缺点：

1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

四、自适应场景下的rem

rem单位是一个灵活的、可扩展的单位、与em不同。rem无论嵌套多少层，只相对根源素的font-size，默认大小是12px，所以1rem=12px;

通过rem布局，我们只需要动态的改变font-size的大小即可。

rem布局的缺点：

在响应式布局中必须通过js来动态控制根元素font-size的大小。

五、 vw/wh实现自适应

1）什么是vw/vh

ss3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

vw:相对于视窗的宽度，宽度为100vw

vh:相对于视窗的高度，高度为100vh

vmin:vw和vh中的较小值

 vmax:vw和vh中的较大值

2）vw单位换算

如果要将px换算成vw单位，很简单，只要确定视图的窗口大小（布局视口），如果我们将布局视口设置成分辨率大小，比如对于iphone6/7 375*667的分辨率，那么px可以通过如下方式换算成vw：1px=(1/375)*100vw

也可以通过postcss的相应插件，预处理css做一个自动的转换，postcss-px-to-viewport可以自动将px转化成vw。

3）vw/vh单位兼容性

绝大多数浏览器支持vw单位，单IE11并不支持，因此有一定的局限性。