为什么CSS像素在手机上显示大小不一致？

司马慧研提问于 2026-03-27 08:02:24 阅读 35

移动

我在开发移动端页面时，明明写了font-size: 16px，但在不同手机上看起来大小不一样，有的特别小，有的又正常，这是为啥？

我查了下说是和设备像素比（dpr）有关，也试过加 viewport 标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但问题还是没解决，是不是 CSS 像素本身就不适合直接用 px 写？那应该用啥单位才对？

我来解答赞 6 收藏

反馈

1 条解答

宇文倩倩 Lv1

这问题确实让人头疼，不过慢慢来解决。首先得明白CSS像素和物理像素的区别。

第一步是理解设备像素比（DPR）。简单说就是屏幕的物理像素和CSS像素的比例关系。比如iPhone 13的DPR是2，意味着一个CSS像素对应两个物理像素。

在移动端开发中，直接用px确实不太靠谱。推荐使用rem作为单位。rem是基于根元素的font-size来计算的。具体做法如下：

在里加上这个标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后设置html的基础字体大小：

html {

    font-size: 16px;

}

这里要注意，不同设备宽度下需要动态调整这个基础字体大小。可以用媒体查询来做适配：

@media only screen and (max-width: 750px) {

    html {

        font-size: 14px;

    }

}



@media only screen and (min-width: 751px) {

    html {

        font-size: 16px;

    }

}

这样做的好处是，当你写font-size: 1rem时，它会根据不同的设备自动调整大小。

另外一种更灵活的方法是用vw/vh单位。比如font-size: 4vw表示字体大小是视口宽度的4%。虽然不是最精确，但在很多场景下能快速解决问题。

记住一点：移动端开发要时刻考虑不同设备的差异性，别想着一套代码打天下。调试的时候多在真机上看看效果，别只盯着模拟器看。我以前也吃过这方面的亏，累死累活调好了，上线后发现各种问题。

2026-03-27 08:03