使用伪元素解决 retina屏幕下 border 是非retina屏幕2倍宽度问题
25 September 2015

经常要给一个元素画框,使用border-top:1px solid #ddd的方式,会导致retina屏幕下显示的是2px。这时候可以使用伪元素:before结合contentbackground-color来实现,这时候是不是retina屏幕就没有关系了。

先看一下效果图:

image

每个list都是:

  <li>
     <div class="item-content">
         <div class="item-inner">
             <div class="item-title label">邮箱</div>
             <div class="item-input">
                 <input type="email" name="email" placeholder="请填写你的常用邮箱">
             </div>
         </div>
     </div>
 </li>

css:

.item-inner:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #e8e8e8;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scaleY(.5);
	transform: scaleY(.5);
}

这种方式其实是利用伪元素创造了一个height:1px;background-color: #e8e8e8;元素,视觉上就是一根线。且不会因为retina屏幕发生变化。

注意:应该判断设备类型,当前只有苹果机有retina的机型,只应对苹果机做出如此的处理。安卓机依旧使用border方式。因为这种方式在大多数低端安卓机上,滚动时线条会抖动,安卓对伪元素的支持效果并不是很好

小tip:对不同机型做处理可以使用js在入口处做统一判断,然后给html加上class,如ios,然后给.ios .item-inner做出如上处理,这个方式对单页面来说尤为有用,要避免的方式就是在每个页面的js部分判断机型动态添加这个类的傻方式。