根元素的字体大小 基准值如何获取

物理像素:屏幕上的像素点(设备屏幕实际具有的像素数目,并且 每个像素点都有自己的属性 如:亮度、颜色等) 该值只能通过下面公式来获取 :物理像素 = 设备像素比 * 设备独立像素

设备独立像素:由虚拟像素px作为单位(目测手机屏幕的宽度) 可通过document.documentElement.clientWidth或者document.documentElement.getBoundingClientRect().width或者window.innerWidth来获取,样式表中通过min-device-width来获取 手机端和谷歌调试工具有差异,以手机端为准,详情请查看底部二维码链接

设备像素比:描述以上两个概念的对应关系(dpr) 可通过window.devicePixelRatio来获取,样式表中通过-webkit-device-pixel-ratio、-webkit-min-device-pixel-ratio、-webkit-max-device-pixel-ratio来获取

物理像素 = 设备像素比 * 设备独立像素

//iphone 6
750 = 2 * 375

//iphone 6plus
1242 = 3 * 414

//iphone 5 和 iphone 4
640 = 2 * 320

//小米note顶配版
1440 = 4 * 320

根元素的字体大小基准值 = 物理像素 / 10

//iphone 6
75 = 750 / 10

//iphone 6plus
124.2 = 1242 / 10

//iphone 5 和 iphone 4
64 = 640 / 10

//小米note顶配版
144 = 1440 / 10
//上面的公式除以10是为了取整,方便计算(理论上可以是任何值)

字体大小可根据 设备像素比 计算,并得出对应的px值

//如果设计图宽为750(目前流行以iPhone 6 的 物理像素 750 作为标准来设计 所以在写页面时需要 / iPhone 6 的 设备像素比)  
//假设图中的某个字体大小是32px 那么相应分辨率下的字体大小是:
//iphone 6
32px = (32 / 2) * 2

//iphone 6plus
48px = (32 / 2) * 3

//iphone 5 和 iphone 4
32px = (32 / 2) * 2

//小米note顶配版
64px = (32 / 2) * 4

元素的宽度px如何转换成rem

rem = 设计图的元素宽高 * 设备像素比 / 根元素基准值

//如果设计图是750 图中的元素宽是120px 那么相应分辨率下的rem大小是:
//iphone 6
3.2rem = (120/2) * 2 / 75

//iphone 6plus
2.898550724637681rem = (120/2) * 3 / 124.2

//iphone 5 和 iphone 4
3.75rem = (120/2) * 2 / 64

//小米note顶配版
3.3333333333333335rem = (120/2) * 4 / 144

参考文章:
移动端高清、多屏适配方案
响应式布局—设备像素密度测试

查看你的设备dpr

发表评论

电子邮件地址不会被公开。 必填项已用*标注