实现前端响应式布局

实现前端响应式的布局的方法有很多种，下面我介绍的是使用rem跟vw/vh这两种方法来实现响应式页面。

1.使用rem来实现响应式布局

rem：是一个相对根元素字体大小的单位。总的来说就是一个相对单位。看到rem这个单位，很多人就会想起em这个单位，em也是属于相对单位，但是他是相对于父元素字体大小的单位。

根元素是html，不是body。

使用方式：

html {
	font-size: 100px;
}
p {
	font-size: 0.16rem; 
}
div {
	width: 2rem;
}

在html种设置font-size: 100px;之后，1rem就是相当于100px。

利用rem来实现响应式：

@media only screen and (max-width: 374px) {
	html: {
		font-size: 86px;
	}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
	html: {
		font-size: 100px;
	}
}
@media only screen and (min-width: 414px) {
	html: {
		font-size: 110px;
	}
}
div{
	width: 1rem;
}

解释：当你的屏幕width小于374px的时候，div的width是86px；当你的屏幕width在375px-413px的范围内的时候，div的宽度是100px；当你的屏幕的width大于414px的时候，div的宽度是110px。这样就可以完成响应式布局了。

2.使用vw、vh来实现响应式布局。

浏览器视口：就是你不滚动浏览器，看到的内容。
vw：是浏览器视口的宽度，将视口的宽度分成100份。100vw就是100%宽度。
vh：是浏览器视口的高度，将视口的高度分成100份。100vh就是100%高度。
vmax：如果1vw大于1vh，那么vmax就是vw，否则就是vh。
vmin：如果1vw小于1vh，那么vmin就是vw，否则就是vw。
例如你手机的屏幕的大小是：375*667。 100vw是375px，100vh是667px
那么这里vmax就是vh，vmin就是vw。

利用vw、vh实现响应式布局：

把px单位改成vw、vh就行了。