首页 > 代码库 > 移动webApp - 1像素实现(点5像素的秘密)

移动webApp - 1像素实现(点5像素的秘密)

在移动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>

 

移动webApp - 1像素实现(点5像素的秘密)