移动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像素的秘密）】