可能你也看到过px，dp，dip，sp，设备独立像素、虚拟像素……这些单位或概念吧，如果你对它们很了解，那本篇对你可能就没什么用了，当然本文并不试图解释这些东西的意思，而是尽可能通过解释这些东西产生的原因，记录一下自己对这些东西的理解。
虚拟像素
最初的最初，一个px单位就够了，很简单纯洁啊，一个px就代表一个屏幕上的像素点。电脑的屏幕虽然尺寸也有差距，但是不大。一般开发网页可以把网页宽度设置成800，900或者1000px，然后居中，两边留白。大屏幕和小屏幕的网页效果基本一样，不同的是大屏幕网页两边的留白会大一点。
后来，特别是智能手机的普及，用户的屏幕变得不再单一，宽度从300多px到4000多px，这个跨度就不算小了。
当然，可能面对这个300-4000，首先想到的是
@media (min-width: 768px){ ... }
@media (min-width: 992px){ ... }
@media (min-width: 1200){ ... }
对这玩意不熟悉的同学可以先百度一下“@media”。
下面假定没有dp、sp……那些单位，1px代表屏幕上的一个像素点。
但是，有的屏幕（比如，老式的“大头机”宽1024x高768）的宽比手机屏幕还小（比如常见的宽1080x高1920），甚至现在很多笔记本都是1366宽x768高的，比手机屏幕也大不了多少，甚至如果手机横屏的话，比笔记本还宽且高。那么手机上看到的网页里的内容会很小很小。所以，@media这种方式，，，，，，，，gg。
这时候，就有人提出了虚拟像素的概念，就是不管真实有多少像素点，手机屏幕的宽度，都用300-400左右的数来表示，比如1125x2436像素的iphoneX的虚拟像素是375x812，320x480像素的iphone3的虚拟像素还是320x480。
移动端网页开发时，css里的1px实际上就是虚拟像素（pc端里的1px就是真实的1px）。也就是说，手机的屏幕都在300-400px之间，不需要管真实像素是1920x1080还是750x什么什么的了，对形状要求高的设置固定宽度，其他元素撑开。那么@media就可以正常工作了~
在浏览器里按ctrl+shirft+i，然后ctrl+shirft+m，可以看到手机屏幕模拟器，可以选择不同的型号。这些不同型号的手机的宽高，用的就是虚拟像素这种单位。大都在300-400左右（比较宽的是平板，火狐浏览器里还有笔记本的屏，不在今天的讨论范围）。
2倍屏，3倍屏
可以看到模拟器里，iphone6和iphoneX都是宽375，但是苹果官网上iphone6的宽是750，iphoneX的宽度是1125，这就是2倍屏，3倍屏的意思或者说原因。
虚拟像素的别名
虚拟像素有很多别名。比如逻辑像素（相对于物理像素，物理像素就是真实像素）；设备无关像素（毕竟宽1125的iphoneX和750的iphone6都是375）；设备独立像素（device independent pixel，缩写dip、dp，android里的概念）
站在历史的角度，用发展的眼光看问题。
其他单位
sp和pt
sp（scale independent pixel 缩放无关像素或者缩放独立像素）和dp很像，也是android里的概念，不同的是，android设备允许用户调整系统文字的大小，而sp的大小会随系统文字大小的改变而改变。举一个不恰当的例子，在2倍屏、系统文字大小为“正常”时，1sp = 2px（这里的px是真实像素），那么当系统文字大小为“大”时，可能1sp = 2.5px。
pt是长度单位point的缩写，1pt=1/72英寸。
rem和em
一直用em、rem，但是一直不知道em是什么单词的缩写还是什么，今天找了半天也还是没找到，知道的大佬请留个言，感谢。
em和rem常用来表示字体大小，公式：1em = 父级元素的字体大小。比如浏览器里的字体大小一般默认为16px，那么如果不对font-size进行任何改变的话，那么1em = 16px。常见的应用场景是：你不想对某个字体设置固定大小，而想根据父级元素的字体大小设置大小，那么如果你想设置成比父级元素小一点可以设置成0.9em或者0.8em，当然这个因人而异，喜欢就用。
rem是root em（可能是吧……）是相对于根元素的字体的大小。
