移动端Retina屏的移动设备如何实现真正1px的线?

444 阅读1分钟

以前总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决? 原来一直没在意,总觉得这1px能打多少?今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距不小……

上图是原生实现,下图是 CSS 边框,手机上对比更加明显

Snipaste_2021-07-15_09-00-04.png

如何解决呢?搜遍整个谷歌,发现好多人早已开始研究解决方案了。有用0.5px的、有用渐变的、有用border的、有用阴影模拟的等等一系列各种方法,总后总结出一个还算好用的方法:伪类 + transform

实现原理分为三步

  1. 原理是把原先元素border 去掉
  2. 然后利用 :before 或者 :after 重做 border
  3. transformscale 缩小一半,原先的元素相对定位新做的 border 绝对定位

伪类 + transform实现单条border

结构

<body>
    <div class="lines"></div>
</body>

样式

.lines li{
    position: relative;
    border:none;
}
.lines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

伪类 + transform实现四条border

结构

<body>
    <div class="lines"></div>
</body>

样式


<style>
        .lines{
            width: 200px;
            height: 200px;
            background: 200px;
            background: pink;
            border:none;
            position: absolute;
        }
        .lines:after{
            content'';
            position: absolute;
            top0;
            left0;
            border: 1px solid #000;
            -webkit-box-sizing: border-box;
            /* 转换怪异盒模型,兼容谷歌、safari浏览器 */
            box-sizing: border-box;
            /* 转换怪异盒模型 */
            width200%;
            height200%;
            -webkit-transformscale(0.5);
            /* 内容宽高缩小一半,兼容谷歌、safari浏览器 */
            transformscale(0.5);
            /* 内容宽高缩小一半,兼容谷歌、safari浏览器 */
            -webkit-transform-origin: left top;
            /* 缩放中心点从左上角开始,兼容谷歌、safari浏览器 */
            transform-origin: left top; 
            /* 缩放中心点从左上角开始,兼容谷歌、safari浏览器 */
        }
 </style>