移动端(手机等)已成为人们最常用的设备,对于我们这些前端开发人员来说,为了让用户用得爽,看得服务是不够的,因为你有时候还得听一个人的话,他就是传说中的设计师,比如:有时他会跟你讨论这样一个问题,为什么这条线看起来比我原型稿的粗一些,这也太粗了吧?诸如此类的话,让你连反驳的机会都没有,于是也只能暗暗的研究,找解决方法。
解决方法不止一种,解决方案也不只一种方法,如果你真的不知道从何下手,那么你可以参考参考现在前端世界里的一些经典解决方法。那好,下面我们变来看看一些流行的框架是如果解决这个问题的。
WEUI 方案
.weui-cell{
position:relative;
}
.weui-cell:before{
content:" ";
position:absolute;
left:0;
top:0;
right:0;
height:1px;
border-top:1pxsolid#e5e5e5;
color:#e5e5e5;
-webkit-transform-origin:00;
transform-origin:00;
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
left:15px;
}
原理:父级设置相对定位,通过伪类来给父级添加子元素设置相对于父级的绝对定位,设置其高为一个像素,然后设置上边框也为一个像素,最后通过 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;
}
原理跟 WUI 差不多,只不过 MUI 是通过背景来实现线条的展现。当你把这两个 demo 在浏览器中放大到 400% 并且行高都设置为 1 时你会明显的看到这条一个像素的线并不是在两行文字的中间。要解决这个问题也非常地简单。我们拿 MUI 为例子,只需要给 mui-table-view-cell 添加 padding-bottom: 1px; 就可以了。