今天偶然发现一个单位：‘vw’；我想说的是，实在太好用了：
- px： 没话说，固定单位，只能写得死死的，虽然任何地方都可以使用，（列如设置宽高，margin，font-size……）；
- %： 虽然可以实现响应，但是不是所有地方都能够使用，你不可能font-size还能设置百分比吧，而且还有一个问题是，也只有当直接父元素设置有宽高过后才能使用%，不然设置了也是白费，因为它没有一个参考点。再有就是，如果根源都是参照body和HTML标签，那么当浏览器窗口变化的时候，你的样式我想已经不成样子了，一团糟；
- em：所有地方都可以用，可以实现响应，但是必须参照里它自身最近的一个父元素的font-size 的大小，越往后倍数不变，基数增大，即便是你都设有固定的font-size，那么后面的就会越来越大；列如：（
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,div,span,ul,li { font-size: 2em; float: left; } </style> </head> <body> <div>4 <span>3 <ul>2 <li>1 </li> </ul> </span> </div> </body> </html>
效果是：
）；这样的话扎心了老铁；
- rem:所有地方都可以用，但是都是参照html（根元素）的font-size大小；要实现响应就必须用媒体查询语句根据设备屏幕宽度变化而改变html标签的font-size；从而实现响应，但是变化是间断的，响应想过不怎么好，这样就会导致某些地方的样式在不同的视口宽度下变化很大，而且你还要写出很多媒体查询语句；很是麻烦；
- vw：这个我只能说很nb，任何地方都可以使用，单位随着视口大小而变化，连续变化就和%的效果一样，但不像直接用%，宽度会以父元素宽度为基数，高度会以父元素高度为基数，而且%并不能用于任何地方， vw陪数是一样的，且能用于任何地方，说直接点你用vm写出来的页面，视口大小变化的时候，里面的字体，盒子大小，就像一张图片一样被缩放，很强势；