為什麼移動端不适合用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個獨立像素渲染，超出螢幕寬度，布局受到影響。