一直以来我们实现边框的方法都是设置
border: 1px solid #ccc
,但是在retina
屏上因为设备像素比的不同,边框在移动设备上的表现也不相同:1px
可能会被渲染成1.5px, 2px, 2.5px, 3px....
,在用户体验上略差,所以现在要解决的问题就是在retina
屏幕实现1px
边框。有以下几种方式:
1、transform: scale(0.5) ——推荐
实现方式:
height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
优点:
圆角无法实现,hack代码多,实现4条边框比较闹心。
缺点:
只能单独使用。
4条框:
.border-4:before {
content: " ";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid #E5E5E5;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}
2、通过viewport + REM的方式来兼容。
目前这种兼容方案相对比较完美,适合新项目(老项目改用REM单位成本会比较高)。
在devicePixelRatio = 2 时,输出viewport:
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时,输出viewport:
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
3、 box-shadow
实现方式:
利用css 对阴影处理的方式实现0.5px的效果。
底部一条线
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
优点:
基本所有场景都能满足,包含圆角的button,单条,多条线。
缺点:
颜色不好处理, 黑色 rgba(0,0,0,1) 最浓的情况了。有阴影出现,不好用。
4、background-image
实现方式:
设置1px通过css 实现的image,50%有颜色,50%透明。
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
优点:
配合background-image,background-size,background-position 可以实现单条,多条边框。边框的颜色随意设置。
缺点:
如果有圆角的效果,很sorry 圆角的地方没有线框的颜色。都要写的代码也不少。
5、用图片
实现方式:
.border-image{
border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/GMzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}
优点:
无
缺点:
也可以通过修改图片来达到圆角的效果,但是由于图片的原因,压缩过后的图片边缘变模糊了(不放大的情况下不明显),需要引用图片或者base64,边框颜色修改起来不方便。
可参考:http://efe.baidu.com/blog/1px-on-retina/
http://www.ghugo.com/css-retina-hairline/