移动端适配之rem适配的原理

原创

已于 2022-08-25 01:20:39 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2021-11-05 14:18:53 首次发布

本文详细探讨了移动端适配中的rem适配原理，从设备像素、CSS像素、像素比（DPR）和PPI的概念出发，以iPhone6为例，解释了如何通过设置根元素字体大小实现自动适配。通过CSS3的rem单位转换，计算出不同设备下根目录的font-size值，从而实现不同屏幕尺寸的适配。关键在于理解DPR与font-size的关系，并利用window.devicePixelRatio进行动态计算。

首先我们要搞清楚、设备像素（物理像素）、抽象像素（css像素）、像素比（DPR）、PPI

设备像素是物理概念，指的是设备屏幕上的像素点个数

CSS 中的像素是一个相对值，不是绝对值，CSS 中的像素单位是抽象的，只是一种规范，最终的显示是取决于物理设备的。

DPR=物理像素/css像素（屏幕的宽度）

因为人的眼睛超过一定分辨率后，分辨率提高，肉眼很难看出差别，所以一般都是以iPhone6为标准做ui设计：设备像素（物理像素）是750px，css像素（视口的宽度）是375px
以iphone6为例（撑满屏幕）：

比如一个固定高度div，要撑满屏幕，为了达到预期效果，设计搞会按物理像素出设计搞750px，但屏幕视口宽度（通过document.documentElement.clientWidth获取）只有375px，我们通常会设置为：width：
375px，这样我们就把值固定了，达不到自动适应的效果

根据css3的rem原理，px单位转成rem单位，是根据根元素字体大小

为了计算方便，我们希望（设计稿750px）样式设置为：width： 7.5rem ，即宽度为7.5个根目录字体大小，7.5font-size
=（750/100）* font-size，由于设备的宽度只有375px，（750/100）* font-size = 375px，font-size=375/750*100=50px

则根目录