本文详细探讨了移动端适配中的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 ，即
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
