前端响应式布局
01
两个模糊概念
什么是响应式布局？什么是自适应布局？两者区别是什么？
自适应布局通过检测视口分辨率，来判断当前访问的设备是：PC端、平板、手机、从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
自适应布局需要开发多套界面，而响应式只需要开发一套界面就可以了。
自适应对页面做的屏幕适配是在一定范围：比如PC端一般要大于1024px，手机端要小于768px。而响应式布局是一套页面全部适应。
自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并作出相应的调整变化。
02
响应式布局实现方案
媒体查询
关于css3媒体查询，可以针对不同的媒体类型定义不同的样式，当视口分辨率发生变化时，页面也会根据其变化重新渲染页面，这里涉及到一个问题，如何确定媒体查询的分割点？
如何选择屏幕大小的分割点，这里我们可以参考bootstrap的分割方案
通过一个简单的表格查看bootstrap的网格系统在各种屏幕和设备上的细节约定：
百分比布局
根据视图高宽计算具体百分比，从而实现响应式的效果。这里会涉及到一个棘手的问题，计算困难，设计稿上元素的高宽需换算成百分比，工作量大。
rem布局
rem单位是相对于根元素html的font-size来决定大小，当视图容器大小发生变化，需同步动态改变font-size的大小，两种实现方式：
通过
JavaScript脚本控制，注意脚本加载需在css样式之前通过媒体查询控制body下的
font-size大小视口单位
css3中新的单位，与视图窗口有关，vw视图的宽度，vh视图的高度
单位 含义 vw 相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw vh 相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh vmin vw和vh中的较小值 vmax vw和vh中的较大值 使用vw作为css单位，将px换算成vw，下面以scss为例：
图片响应式
$vm_base: 700;@function vw($px) {@return ($px / $vm_base) * 100vh;}// 假设元素在视觉稿中，宽度和高度为500px，字体大小为14px.main {width: vm(500);height: vm(500);font-size: vm(14);}
使用max-width（图片自适应）
img {display: inline-block;max-width: 100%;height: auto;}
inline-block元素相对于周围元素是内联的，max-widt`保证图片最大显示为其自身的100%，height为auto保证图片进行等比缩放而不失真。
使用srcset
<img srcset="test001.jpg 1x, test002.jpg 2x" src="test003.jpg" alt="">如果屏幕的dpi = 1则加载1倍图，dpi = 2则加载2倍图，如果不支持srcset则默认加载src里面的图片。
使用backrgound-image 通过媒体查询控制加载不同图片
03
最后
在实际项目中，目前使用较多的是使用媒体查询作为布局的基础，使用rem做字体的适配，用srcset来做图片的响应式，宽度可以用rem，flex等来实现响应式，使用视口单位vm/vh做响应式布局也挺多。