设备像素比---devicePixelRatio

一、

定义:设备像素比 = 设备独立像素÷设备物理像素

### 设备独立像素:
const indepWidth = document.documentElement.getBoundingClientRect()

### 设备像素比:
const dpr = window.devicePixelRatio
可以拿到当前的设备像素比。

### 设备物理像素:
const physWidth = indepWidth/dpr
获取设备独立像素

二、结合rem的使用

rem:rem的值是基于html标签中的fongt-size属性值进行计算获得对应的px像素值。
计算方式:目标rem值 = 目标px值 ÷ html.font-size

html中font-size的确定方式:设备的独立像素宽度 ÷ 确定的基数
这样比确定一个固定像素数(如:16px),然后再算html.font-size要更好一点。

<html font-size='100px'>
  <span style="width:1rem">
等价于:  <span style="width:100px">
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 设备像素比(dpr) 是设备上物理像素和设备独立像素(device-independent pixels (dip...
    lmmy123阅读 5,198评论 0 0
  • 作者:HelKyle链接:http://www.w3cplus.com/css/when-to-use-em-vs...
    红叶丶秋鸣阅读 8,635评论 0 3
  • 01 上午,同事提起来,楼下办公室里有位同事,逛街的时候,突然 大出血,检查发现,是子宫出了问题。最后,为了保命,...
    遇见唐姑娘阅读 4,816评论 7 10
  • 写在前面的话:前几年一直在挣扎,是按部就班的过日子还是博一把。纠结来纠结去,身边的人快速成长,自己却老在原地...
    凛静阅读 1,769评论 1 3

友情链接更多精彩内容