关于逻辑像素

像素

不论是手机屏幕还是电脑显示器，呈现出的画面都是由很多点组成的。只不过，这些点排得很紧，看起来像是连在一起的。我们通常把这些点，称为像素点，或像素。

分辨率

像素点在屏幕上，一行又一行、一列又一列、整整齐齐地排列着。一般情况下，组成一个画面的像素点越多，这个画面就越清晰。
通常的所谓 4k，一般就指一行大约有 4000 个像素点的显示器；1080*1920，一般指一行有 1920 个像素点，总共有 1080 行。

逻辑像素

不同的手机，分辨率相差很大：

• iphone3 480*320
• iphone4 960*640
• iphone5 1136*640
• iphone10 2436*1125
• 三星S20 3200*1440

把图片宽度设置成 320px：

• iphone3 占满屏幕
• iphone4 占 1/2
• S20 占不到 1/4

移动端网页刚刚兴起时，前端把某个 div 设置成了 300px，大约占屏幕一整行。
后来屏幕越来越大，分辨率越来越高。
当一款手机，屏幕更优秀，而显示效果反而更难看（原来占一整行的东西，现在只缩在屏幕左边一半）。这是很令人困扰。
于是，生产商为了使显示效果好一点，决定把 300px 的宽度，用 2*300 个像素点来显示。
这样，1px 在某些设备上是指一个像素，而有些，却是两个像素点。
于是就乱了，于是，有人造出了新的名字。用“物理像素”来代表原来像素的本意，用“逻辑像素”来代表后者。
这样的优点是，不论手机屏幕多大、分辨率多少，在开发者看来，都是 300px～400px 左右。

于是产生了两倍屏、三倍屏这样的概念。两倍屏上，300px 就是 600 个像素那么宽；三倍屏上，300px 就是 900 个像素那么宽。于是，当你设置 border: 1px solid #000时，那个边框粗得使人抓狂。

关于移动端边框宽度问题的解决，可以参考这篇