移动端一像素边框
由于手机屏幕dpi(设备像素比)[关于dpi内容可点击这里](http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)的不同,正常的一像素在手机端显示出来的就不是所谓的一像素,而是根据不同手机屏幕的dpi显示不同的像素,但是一像素边框又是一个很常见的需求,故这里mark一下所谓的一像素边框。
可将下面代码写入mixin.styl文件下,加入全局样式,可直接传入颜色参数得到边框线
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border: 1px solid $color
content: ' '
观察上述代码看到还是之前的1px,并未有特殊变化,此时我们需要使用css3新增的scaleY来进行缩放,达到所要的效果。
如下代码片段:
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
.border-1px
&:after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
.border-1px
&:after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
这样在将.border-1px加入到所要实现一像素边框处的class处就可以实现响应式的一像素边框了。