今儿个，咱来聊聊网页设计里头那些个单位，啥px、em、rem、vh、vw的，一堆堆的，看着就头疼。一开始我做网页，那叫一个随心所欲，想到哪儿算哪儿，单位也是瞎用，结果做出来的东西，在自己电脑上看还行，一到别人电脑上，或者手机上，立马就变形，那叫一个惨不忍睹！

后来我痛定思痛，决定好好研究一下这些单位。我先是把能找到的资料都翻个遍，什么w3school，MDN，还有各种技术博客，看一大堆。看得我是云里雾里的，感觉每个都懂点，又感觉啥也没懂。

光看可不行，还得动手实践！于是我就开始拿各种单位做实验。

像素（px）

先从最熟悉的px开始。这玩意儿，我一开始以为最简单，不就是像素点嘛结果发现，也没那么简单。在不同的屏幕上，同样大小的px，显示出来的效果还不一样！

我做个简单的div，设置成100px宽，在我那老旧的显示器上看着还行，结果到我同事那高大上的4K屏上，就缩成一小点！我这才明白，原来px是相对单位，跟屏幕的分辨率有关。分辨率越高，1px代表的实际长度就越小。

em 和 rem

我又试em和rem。这两个都是相对单位，但相对的对象不一样。

• em： 这玩意儿是相对于父元素的字体大小的。比如，父元素的font-size是16px，那么1em就是16px，2em就是32px。要是父元素没设置字体大小，那就一级一级往上找，直到找到html元素。
• rem： 这个更直接，它是相对于根元素（html）的字体大小的。也就是说，只要html的font-size设置好，整个页面的rem单位就都确定。

我分别用em和rem做两个div，设置不同的字体大小，然后在不同大小的屏幕上观察效果。发现rem用起来更方便，只要调整html的font-size，整个页面的大小就都跟着变。而em，因为是相对于父元素的，有时候得一层一层地算，比较麻烦。

vh 和 vw

我又研究一下vh和vw。这两个是相对于视口（viewport）的单位。

• vh： 视口高度的1/100。
• vw： 视口宽度的1/100。

啥叫视口？简单来说，就是浏览器里能看到网页的那块区域。我用vh和vw做一个div，设置成50vw和50vh，不管我怎么调整浏览器窗口的大小，这个div始终占满屏幕的一半。这玩意儿用来做响应式布局，那叫一个爽！

经过一番折腾，我总算是对这些单位有点感觉。现在做网页，我基本上都用rem和vw，再配合媒体查询，做出来的页面在各种设备上都能 মোটামুটি保持一致。这只是我的个人经验，具体用哪个单位，还得看实际情况。

网页设计这东西，看着简单，水深着！得多看，多练，多琢磨，才能做出点像样的东西来。