css - 移动端渲染尺寸问题

问题描述

问 题

工作中发现了这么一个现象，比如说这么一个效果：

很常见的箭头对吧，然后我用如下的CSS将它写出来：

<!-- 有很多个span标签 -->
<span></span>
<span></span>
...
<span></span>
<span></span>

/* CSS */
span {
    display: block;
    position: absolute;
    top: 50%;
    right: .6rem;
}

span::before,
span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: .55rem;
    height: .075rem;
    background: #9694a1;
    -webkit-transform-origin: right center;
            transform-origin: right center;
}

span::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

span::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

理论上来说，结果应该是这样的：

只是将第一张图重复了很多次而已，但实际上，无论从PC浏览器还是手机浏览器里面看，却是下面这样的：

PC浏览器截图

手机浏览器截图

结果有粗有细，然而它们用的都是同一个样式。

下图也出现了同样的问题，两个圆用的都是同一套样式，但上面的圆是正常的，下面的圆明显被上下拉长了。

上图样式如下：

.check_box {
    position: relative;
    display: block;
    width: 1rem;
    height: 1rem;
    background: #353340;
    box-sizing: border-box;
    border: 1px solid #9694a1;
    border-radius: 50%;
}

个人猜测可能是因为浏览器在从rem计算成px的过程中出现了问题？求前辈们告知～谢谢。

————————————————————————————————————————
2017/4/14 16:46补充：
计算根元素font-size代码

var w = document.documentElement.clientWidth,
    fs = w < 640 ? w / 18.75 : 640 / 18.75;

document.documentElement.style.fontSize = fs + "px";

解决方案

今天又遇到这个～顺便研究了下，发现该问题之存在于安卓的微信内置浏览器和UC浏览器等，目前得出的结果基本符合我上面的猜测，我把小箭头的高度从.075rem改成2px以后，就没有这个问题了～虽然问题暂时解决了，不过深层次的原因还有待研究。

这篇关于css - 移动端渲染尺寸问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！