第一次发博客，作个纪念。
自适应的布局，当我们调整浏览器大小的时候，咱们写的这个网页内容也随着浏览器大小进行改变，当我们使用不同分辨率的电脑屏幕打开时候，网页内容也能保持最初的一个排版，元素按屏幕比例进行了缩放。
em:都说这是一个相对的字体尺寸。怎么理解这个相对呢？
这个相对：这个是一个可变的尺寸，是由font-size决定的。
举个栗子：一个div元素。不给它设置font-size 那么这个div使用em单位。设置：width:10em height:10em 那么你在浏览器上面观察到的尺寸宽高都是160px; 那么这个1:16是怎么来的？？ ！！是因为浏览器字体默认大小font-size为16px ！！ 那么假设我们给它一个值：font-size:12px; width:10em;height:10em; 你再去网页看，就会发觉这个元素的宽高为120px,em:px的比例就会变成1:12:； so 你设置的font-size就是em的比例值。
注意点1：浏览器有默认字体范围，例如谷歌最小的字体为12px 那么在谷歌浏览器上面。使用em缩放，font-size最小就到12px，即使再小，这个值也不会发生改变。
注意点2：每个元素都具有一个font-size,所以每个元素的大小都是根据它自身的这个fons-size进行改变的。
建议：动手试一试。你会发觉很简单。
vw vh：前面是宽度，后面一个是高度，他俩一点儿都不复杂，甚至有点太简单。 这个值是怎么得来的呢？他们的范围取值是0~100 代表的就是百分比，没有单位。你拿到网站的设计图之后，比如是一个1080*780的图片尺寸。 假设设计图中的一个导航框框的尺寸是200*100的尺寸。 那么它的vw就是 200/1080 * 100的值。vh的值就是100/780 *100。
这样做的基础是这个设计图是撑开整个屏幕的。你得注意vw,vh是相对于浏览器的大小进行地一个缩放。关于精度问题由于每个浏览器支持的精度不一样，博主建议最多小数点后两位。关于兼容问题，建议多用在移动端，PC端需要IE9以上，绝大部分浏览器都支持。
关于rem这个重点，留在下一篇博客~ ------BigDong