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