移动端rem，vw,vh,百分比布局

PC端的px布局一般都会写死固定宽高或者用min-width，max-width这种方式去做不同屏幕分辨率适配，而移动端的布局要复杂的多。不同手机的宽高比例和屏幕尺寸都不太一样，所以需要各种布局方式去适配

1.首先说rem布局，rem单位属于一个相对单位，也就是相对于根元素的HTML里的font-size，一般来说根元素的font-size浏览器默认都为16px,也就是说，这个时候你在利用rem布局的时候，你的1rem则是16px

这样的话导致在设计元素尺寸的时候非常不好计算，那么我们就可以在HTML的初始css时设置一个根元素font-size，但是有些浏览器，比如谷歌，默认字体大小不得小于12px,而且在移动端的浏览器进行浏览时

用户为了个人习惯有的时候也会设置浏览器的字体大小，所以说在HTML中设置的根元素font-size更多是为了开发者便于计算页面元素尺寸，为了维持浏览器默认大小，在body里，一样要设置回font-size为16px

这样你在进行该网页编辑的时候就不会影响到浏览器的默认字体

2.vw,vh,百分比布局，vh,和vw是两个相对单位，视窗的宽度的百分之一就是1vw,vh同理，这个时候可能会产生疑惑，那么vh和vw不就和百分比是一样的，并不是，百分比的话是相对于当前元素的父元素的百分比

而vh和vw一直是相对于当前视窗的一个单位长度，那么视窗是什么呢，从设备来开始，到移动端显示的区域，基本可以分为，设备屏幕视窗，浏览器视窗，和当前网页视窗，而vw和vh相对的是当前网页的视窗宽

度高度。