HTML5响应式布局总结

什么是响应式？

页面的响应式设计与开发就是根据用户行为及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。

一、viewport

viewport 是用户网页的可视区域。
viewport的设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中，width：控制 viewport 的大小，可以指定一个具体值值；或者特殊的值，如 device-width
为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

二、媒体查询 media query

常见的媒体查询：
1.指定最大宽度：

@media (max-width:768px){}

2.指定最小宽度：

@media (min-width:500){}

3.混合媒体查询

@media (max-width:768px) and (min-width:500px){}

例如：我们要求在500px以内div的背景显示红色

@media (max-width: 500px) {
	div {
		background: red;
	}
}

除此之外，我们也可将媒体查询写在link标签上，例如：

<link rel="stylesheet" media="screen and (max-width:768px)" href="css/mobile.css">

意思是当屏幕宽度小于等于768px时，执行当前的css。
通过媒体查询，我就可以在不同分辨率的设备显示不同的样式，达到响应式的目的。

三、Em & Rem

em 和 rem 是css中的单位，我们常见的单位还有 px 。那么他们之间有什么区别呢？

px：像素（Pixel）。像素px是相对于显示器屏幕分辨率而言的。
em：相对于当前元素的父元素的大小而言，例如：

<div style="font-size: 16px;">
	<p></p>
</div>

我们给div设置的字体大小为16px，那么我们在p标签内的1em就是16px，2em就是32px，以此类推。

rem：是相对于html根元素的大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是>1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

因此我们在做响应式页面的时候通过会把html的字体大小设置为62.5%，这样就方便我们换算rem和px

html{
	font-size: 62.5%;
}

四、vw & vh

vw 和 vh 就是viewport width 和 viewport height ，是相对于浏览器视口的单位，基于浏览器的body部分，其换算如下：

1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。

这里要把视口单位和百分比单位区分一下，视口单位是视口的百分比尺寸，而百分比单位是当前节点的祖先元素大小的百分比尺寸。
举例说明一下：
先写一个div，里面给一段内容

 	<div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio delectus rem sequi? Eligendi eveniet dicta
        sint nemo voluptatibus culpa, ducimus dolores. Dignissimos vero animi quis ad quia! Id, obcaecati consectetur.
    </div>

在给他写一些样式，将高度设为100%：

div {
	height: 100%;
	background: pink;
}

效果图如下：

我们尝试将高度改为100vh：

div {
	height: 100vh;
	background: pink;
}

看下效果
修改之后，div就覆盖了整个浏览器的视口。