关于移动端网页里的像素

可能你也看到过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高的，比手机屏幕也