为什么移动端不适合用px来布局

先贴一篇别人写的《理解设备像素比》

上面这篇介绍了关于移动端尺寸的知识，我们接着来说明为什么移动端不适合用px来布局。

以渲染一个宽度铺满屏幕的div举例说明

• 情况1: 375x667（devicePixelRatio=1）、750x1334（devicePixelRatio=2），一使用px布局不会影响布局

设置div宽度为375px，那么在375x667的屏幕水平方向上，刚好由375独立像素渲染，即刚好占满屏幕全部宽度，而在750x1334屏幕上，由于该屏幕的deviceRatio为2，水平方向渲染一个css像素实际使用2个像素，即该div水平方向由750个独立像素渲染，也刚好占满屏幕，所以在这两种屏幕上，即使使用px布局，渲染效果也是一样的

• 情况2: 375x667（devicePixelRatio=1）、360x640（devicePixelRatio=1），使用px影响布局

设置div宽度为375px，那么在375x667的屏幕水平方向上，刚好由375独立像素渲染，即刚好占满屏幕全部宽度，而在360*640屏幕上，由于该屏幕的deviceRatio同为1，水平方向渲染一个css像素实际使用1个像素，即该div水平方向由375个独立像素渲染，超出屏幕宽度，布局受到影响。