移动webApp - 1像素实现（点5像素的秘密）

Posted 2020-09-27 冰河末日

在移动web项目中，经常会实现以下1像素的边框

移动web设计中，在retina显示屏下网页会由1px会被渲染为2px，那么视觉稿中1px的线条还原成网页需要css定义为0.5px

但是正当我们去用0.5px定于boder的时候发现css的border-width: 0.5px不起作用，那是不是真的不支持0.5px呢？

 

我们在定义0.5px的时候发现的一些问题

• css的border-width值支持.5px，但是显示状态受屏幕分辨率的影响
• ios 8和winphone 8的设备对高清屏做了特殊处理，支持显示border-width:.5px
• android 几乎所有的机型不支持显示.5px的边框

 

 

实现.5px的线条

---

网络上有很多方法，如设置viewport，box-shawdow，border-image，background-image，transform:scale等，这里不做介绍(百度或者谷歌“retina 1px 边框”有答案)，本文只介绍一种觉得比较好用的方法，一来兼容性好，二来不依赖图片。

transform:scale(x,y)

通过css支持定义border或者height为.5px大的线条，在android设备中的无法显示出来，这里有个小技巧，果设置线条为1px，然后通过transform:scale(x,y)来缩放线条为原来的一半，可显示0.5px的线条。

<style type="text/css">
.line {
    height: 50px;
    line-height: 50px;
    background-color: #CCC;
    border-bottom:1px solid red
} 
    
.scale {
    position: relative;
    height: 50px;
    line-height: 50px;
    background-color: #CCC
}
.scale:after {
    position: absolute;
    content: ‘‘;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background-color: red;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
</style>


<div class="line">1px</div>
<div class="scale">0.5px</div>