了解前端响应式布局

前言

在我们拿到UI的设计图时往往不能只考虑设计图的尺寸，还得考虑不同电脑不同手机不同分辨率情况下的样式，接下来让我们来了解前端的响应式布局来解决通过一套代码解决不同屏幕分辨率的样式问题。

响应式布局

响应式布局是为了实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。。

实现方案

1. 媒体查询 媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

/*>=1024的设备*/
@media (min-width: 1024px){
    ...
} 
/*>=1100的设备*/
@media (min-width: 1100px) {
    ...
}
/*>=1280的设备*/
@media (min-width: 1280px) {
    ...
} 

2. 百分比单位

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

3. rem布局

rem是css3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。

4. vw/vh视口单位

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

视口单位与百分比类似，但确有区别，百分比单位换算困难，这里的vw更像"理想的百分比单位"。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

单位	含义
%	大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vh	相对于视窗的尺寸