移动端一个像素问题

前言

移动端（手机等）已成为人们最常用的设备，对于我们这些前端开发人员来说，为了让用户用得爽，看得服务是不够的，因为你有时候还得听一个人的话，他就是传说中的设计师，比如：有时他会跟你讨论这样一个问题，为什么这条线看起来比我原型稿的粗一些，这也太粗了吧？诸如此类的话，让你连反驳的机会都没有，于是也只能暗暗的研究，找解决方法。

起因

这个原因真的不能怪你，但必需要你自己解决。生产厂商这么做也只是为了想让屏幕细腻，更清晰。

解决方案

解决方案也不只一种方法，如果你真的不知道从何下手，那么你可以参考参考现在前端世界里的一些经典解决方法。那好，下面我们变来看看一些流行的框架是如果解决这个问题的。

下面的一些例子代码可能不完全是 UI 库的源码，为了能说明问题，我把里面的一些不相关的样式去掉了，后面的例子可能也会对样式有所删减，不过不会影响你的理解。

WEUI 方案

.weui-cell {
    position: relative;
}
.weui-cell:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 15px;
}

DEMO：http://yunkus.com/demo/mobile-one-pixel-solution/weui-solution.html

原理：父级设置相对定位，通过伪类来给父级添加子元素设置相对于父级的绝对定位，设置其高为一个像素，然后设置上边框也为一个像素，最后通过 CSS3 的 transform 属性把伪元素缩放为原来的一半大小。

MUI 方案

.mui-table-view-cell {
    position: relative;
}
.mui-table-view-cell:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 15px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #c8c7cc;
}

DEMO：http://yunkus.com/demo/mobile-one-pixel-solution/mui-solution.html

原理跟 WUI 差不多，只不过 MUI 是通过背景来实现线条的展现。

当你把这两个 demo 在浏览器中放大到 400% 并且行高都设置为 1 时你会明显的看到这条一个像素的线并不是在两行文字的中间。要解决这个问题也非常地简单。我们拿 MUI 为例子，只需要给 mui-table-view-cell 添加 padding-bottom: 1px; 就可以了。

这里有个疑问：为什么 WEUI 要通过 boder-top 来画线，而不是像 MUI 那样简单粗暴地直接给个背景色来画线？