响应式布局可以让网站同时适配不同分辨率的屏幕，让客户有更好的体验。一共有以下五种方法实现响应式布局：

　●  百分比布局

　●  媒体查询布局

　●  rem响应式布局

　●  vw响应式布局

　●  flex弹性布局

响应式布局方法一：媒体查询

　　使用@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的屏幕设置了不同的背景颜色。

　　通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

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

响应式布局方法二：百分比%

　　比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

　　height，width属性的百分比依托于父标签的宽高。但是，padding、border、margin等属性的情况又不一样？

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

　　子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

　　子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width、border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度

缺点

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

　　各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

　　所以，不建议用%来做响应式布局。

响应式布局方法三：vw/vh

　　css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

　　与百分比布局很相似，但更好用。

响应式布局方法四：rem

　　rem单位是相对于字体大小的html元素，也称为根元素。 默认情况下，html元素的font-size为16px。所以此时1rem = 16px。

第一版

@media screen and (max-width: 414px) {
 html {
 font-size: 18px
 }
}
@media screen and (max-width: 375px) {
 html {
 font-size: 16px
 }
}
@media screen and (max-width: 320px) {
 html {
 font-size: 12px
 }
}

利用rem和媒体查询，在分辨率发生变换时，给它不同的font-size。

优化版

//动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小。此时为宽的10等分
 document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

理解：上面代码实现了，无论设备可视窗口如何变化，始终设置rem为width的1/10.即实现了百分比布局。就没有第一版的媒体查询那样僵硬。

以上代码需在dom之前写入（可放在head里面第一个script标签）

响应式布局方法五：flex弹性布局

　　弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。

　　尤其是现在类似于某宝、某东一类的电商web站或者手机app的页面，利用弹性布局是都可以很轻松的实现的，下面就是用弹性布局copy的某动的手机应用的部分页面。

　　大家可以看到，特别是在小图标排列或是频繁划区的时候，弹性布局就显得十分的便利。下面，就带大家来回顾一下关于弹性布局（display:flex）。

　　弹性布局 flex 是CSS中 display 的一个属性值，通过在父容器上添加 display:flex; 属性，便可以实现其子元素在父元素中的弹性布局，但要注意的是 display:flex; 这一条样式只会作用在添加这一属性的父容器和非隔代子容器上，换句话说，父容器上的 diaplay:flex; 属性并不会使其直系子元素中的子元素产生弹性布局。通俗来讲，爹只能管得到自己的儿子、而管不到自己的孙子。如果想要在下一层中继续使用弹性布局，我们可以在相应的子元素上再次添加 display:flex; 属性来实现。

　　弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。

　　在父元素上，我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，这几个属性分别从 主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。

　　在子元素上，我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个属性分别从 项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。

这里给大家讲一下我在当时感觉到的比较疑惑的几个地方。

（1）主轴与交叉轴。 在弹性布局中，主轴及主轴的方向取决于 flex-direction 属性的属性值，它可以是在水平方向上，也可以是在垂直方向上，既可以是正向，也可以是反向，在这里，初次接触这一概念的朋友们要注意了，千万不要单单把“主轴”与“水平正向”划等号，虽然说在CSS中规定的默认值是这样的。而交叉轴表示的就是与主轴垂直的那条轴线。

（2）基线。在弹性布局中，还提到了“基线”这个词，基线是指字母x的下端沿。而许多属性值所谓的baseline对齐方式就是指沿一行中小写x的低端线对齐，就好像一直有那么一个模板在比对者一样。

（3）多交叉轴线。多交叉轴线是在flex-wrap属性设置为wrap后可能出现的一种情况，即父容器中出现了多行的排列，而每一行都有其各自的轴线。

利用UI框架实现响应式布局

　　其实，现在的主流UI框架都会考虑到响应式布局这个问题，比如elementUI，iview等框架提供了栅格系统，<row>搭配<col>来实现响应式布局。 所以在工作中直接拿来使用就完事了。

移动端响应式布局 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width=device-width: 是自适应手机屏幕的尺寸宽度。

maximum-scale:是缩放比例的最大值。

minimum-scale:是缩放比例的最小值。

inital-scale:是缩放的初始化。

user-scalable:是用户的可以缩放的操作。

这个写法是用户不能缩放的页面设计。因为，如果页面能缩放的话，就会影响用户的体验，在手机端，我们都可以找到点击的按钮或者自己感兴趣的菜单进行操作。其二：就是我们如果让页面缩放的话，就完全暴露了我们手机app的程序是html的架构了。所以，我们专为移动端的设计页面的时候，就不需要用户进行缩放了。

flexible.js

　　flexible.js是阿里手淘团队开发的。用来解决移动端的适配问题。

　　假设现在要适配一个iphone6的设备。设计师给了一个750px宽度的设计稿（注意这里是750px而不是375px）前端工程师用750px的这个比例开始还原把宽高是px的转换成rem字体使用px而不使用remflexible.js会自动判断dpr进行整个布局视口的放缩至于flexible.js怎么使用的可以自行搜索