em rem解析 rem适配 及1px适配

本文探讨了显示器像素、设备像素比(dpr)的概念,并详细解释了em与rem在CSS中的应用。通过示例介绍了rem如何用于网页适配,以及1px边框在不同设备上显示不一致的问题及其解决方案,包括调整viewport元标签和使用伪类结合transform技巧。
摘要由CSDN通过智能技术生成

显示器像素

1.物理像素(设备像素)–显示器上最小的物理单元,由主机控制,显示不同的色值和亮度。
2.设备独立像素(css像素)–每个css像素属于虚拟像素,由系统转换控制不定数量的物理像素响应。
3.设备像素比(dpr)–物理像素 / 设备独立像素

像素关系

Iphone6为例:
在这里插入图片描述

图中所示,一个小方块为1个物理像素,左图设备像素比(dpr)为1,也就是1px等于1个小方块,右图设备像素比(dpr)为2,也就是1px等于2个小方块。
css的2px,在左图中占据4个格子,在右图中占据16个格子,左右总面积相等,所以右图中显示的更加清楚。

em

em是css2时推出的相对单位,相对于父级元素的字体大小比值,浏览器默认font-size:16px,这时1em等于16px。

当前元素设置font-size时,当前元素其他css属性使用到em时,都是相对于当前元素的font-size进行比值,
比如父级元素font-size:24px;当前元素font-size:16px;那么当前元素设置的margin:1em;相当于margin:16px;并不等于24px。

em总是相对于父级元素字体大小比值,这就导致每一层级的font-size若不是1em,就会影响子集元素的em比值。
比如父级元素font-size:16px;当前元素的设置font-size:1.2em;就等于19.2px;子元素设置font-size:1.2rem就等于23.04px。

rem

rem是css3推出的相对单位,相对于根元素(html根标签)字体大小适配,浏览器默认font-size:16px;这时1rem等于16px。
rem做适配主要是通过改变html标签的font-size,从而达到控制全部以rem为单位的元素大小。

rem适配

以下为rem适配代码

//designWidth为设计图宽度,为设备独立像素值(css像素)
(function (designWidth) {
   
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

    function refreshRem() {
   
    	//获取html元素宽度,也就是浏览器宽度,也就是css像素
        var width = docEl.getBoundingClientRect(
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值