移动设备下小数位px的渲染

最新推荐文章于 2021-08-19 10:44:55 发布

weixin_34240520

最新推荐文章于 2021-08-19 10:44:55 发布

阅读量150

点赞数

原文链接：https://juejin.im/post/59f0415a518825272c04282e

版权

起因

起初发现文字未垂直居中，以为是行高和基线引起，后来将行高，字体大小指定为1rem高度用padding支撑，但发现为元素指定相同高度的情况下，上面的高度永远比下面的小一些，导致文字上移，未能垂直居中

原因

但是PC上显示正常，随后想到可能是因为手机dpi高导致浏览器渲染小数形式的px时，自动做出调整。所以随便写了个测试，如下：

// 小demo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        .a, .b {
            width: 100px;
            height: 1.42px;
            background-color: red;
            margin-top: 1px;
        }
        .b {
            background-color: green;
        }
        .c {
            width: 100px;
            height: 1.61px;
            margin-top: 1px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>
</html>复制代码

image.png

很明显红色的是1px，绿色的是2px，黄色的是1px，那结果就很明确了，手机浏览器对于小数渲染采用四舍五入的方式（注意：只是展示，实际占位还是原始大小），上一个元素舍去的部分会和下一个元素相加

红色区域（1.41px）- 舍去0.41px - 渲染大小为1px - 下一个元素渲染高度加上0.41px
绿色区域（1.41px + 0.41px = 1.82px） - 掠夺0.18px - 渲染大小为2px - 下一个元素渲染高度减去0.18px
黄色区域（1.61px - 0.18px = 1.43px）- 舍去0.43px - 渲染大小为1px - 下一个元素渲染大小高度增加0.43px

想法

rem等单位的好处很明显，但是在有些场景下还是px更加合适，多灵活按照实际情况运用

weixin_34240520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动设备下小数位px的渲染

起因起初发现文字未垂直居中，以为是行高和基线引起，后来将行高，字体大小指定为1rem高度用padding支撑，但发现为元素指定相同高度的情况下，上面的高度永远比下面的小一些，导致文字上移，未能垂直居中原因但是PC上显示正常，随后想到可能是因为手机dpi高导致浏览器渲染小数形式的px时，自动做出调整。所以随便写了个测试，如下：// 小demo&lt;!DOCTYPE html&gt;&l...
复制链接

扫一扫