rem

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

iPhone 3gs 物理像素320  device-width = 物理像素

iPhone 4     物理像素640   device-width = 物理分辨率/dpr/initial-scale(缩放比)

上面是思路,正常做的时候,通过   window.innerwidth  就是屏幕的宽度。

以标准设计稿iPhone6,750px为标准

1rem = 100px;

7.5rem = 750px;

动态设置

fontsize = 100px*window.innerWidth/750

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=1.0:表示最小的缩放比例
maximum-scale=1.0:表示最大的缩放比例
user-scalable=no:表示用户是否可以调整缩放比例

在JavaScript中,通过window.devicePixelRatio来获取
DPR = 物理像素 / 逻辑像素

Document.documentElement.style.fontSize = document.documentElement.clientWidth / xxx + ‘px’;

Window.onresize = function(){Document.documentElement.style.fontSize = document.documentElement.clientWidth / xxx + ‘px’;}

原文地址:https://www.cnblogs.com/yangxueyou/p/9953386.html