常见的响应式布局解决方法
由于设备的分辨率不同，我们就用响应式布局来解决设备分辨率不同的问题，常见的解决方法有px视口、媒体查询、百分比、rem、和vw/vh等方法来实现响应式布局。接下来介绍下个种方法。
一、px和视口
在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。
那么什么是像素？
像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。
css像素：为web开发者提供，在css中使用的一个抽象单位。
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。
什么又是视口呢？
广义的视口，是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口
(1) 布局视口（layout viewport）
布局视口定义了pc网页在移动端的默认布局行为，因为通常pc的分辨率较大，布局视口默认为980px。也就是说在不设置网页的viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。因此我们可以明显看出来，默认为布局视口时，根植于pc端的网页在移动端展示很模糊。
(2) 视觉视口（visual viewport）
视觉视口表示浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页的显示内容，从而改变视觉视口。视觉视口的定义，就像拿着一个放大镜分别从不同距离观察同一个物体，视觉视口仅仅类似于放大镜中显示的内容，因此视觉视口不会影响布局视口的宽度和高度。
(3) 理想视口（ideal viewport）
理想视口或者应该全称为“理想的布局视口”，在移动设备中就是指设备的分辨率。换句话说，理想视口或者说分辨率就是给定设备物理像素的情况下，最佳的“布局视口”。
二、媒体查询
使用@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并不支持，因此有一定的局限性。