问题来源
众所周知,Retina屏幕下将 border 设置为1px , 其显示却比1px大,通常为2px。原因很简单,同样大小的手机一个为普通手机,一个为Retina手机,在css的世界中,其大小都为320px。而Retina屏幕的实际宽度却为640px。这就导致了css中的1px在Retina屏幕中实际为2px。这也是Retina屏幕显示效果比普通要更清晰,售价也更贵的原因所在。
解决方案
问题的原因清楚了,那我们就来谈谈具体的解决办法吧。
方案一: .5px
@media screen and (-webkit-min-device-pixel-ratio: 2) {
border: .5px solid red;
}
该方案本应是最理想的方案,无奈Android与低版本的iOS(ios8才开始支持)不支持该方案。故,放弃!
方案二: border-image
@media screen and (-webkit-min-device-pixel-ratio: 2){
.border{
border: 1px solid transparent;
border-image: url(border.gif) 2 repeat;
}
}
缺点:处理圆角只能这么放大或缩小图片,麻烦
方案三:background渐变(FrozenUI采用该方式实现)
@media screen and (-webkit-min-device-pixel-ratio: 2){
.ui-border-t {
background-position: left top;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#fff),to(#fff));
}
}
缺点:无法实现圆角、一个div上下左右只能实现一个方向、占用background属性
方案四::before、:after与transform结合 《极力推荐》
简单的实现代码如下:
.radius-border{
position: relative; /*该句不可少,因为要对:before 进行绝对定位*/
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
.radius-border:before{
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
border-radius: 8px;
border:1px solid #999;
-webkit-transform(scale(0.5)); /*核心:其实border还是1px,只是缩小一倍后可显示为.5px的效果;同时由于是对:before进行缩小,所以不会影响到div的大小及内容*/
-webkit-transform-origin: 0 0;
transform(scale(0.5));
transform-origin: 0 0;
}
}
优点:圆角、一个div上下左右可同时实现一个或多个(本人目前工作中使用该方式)
缺点:代码量在,且占用了伪元素
结论:最优方案-方案四-sass封装minxin
方案二、三、四可行,《如果考虑到 div大小不定问题》、《圆角问题》、《一个div多边同时实现问题》 这三个问题,毫无疑问,只能选择方案四。但是如果每次都要写一大堆的代码来实现 thin-border 效果。这对我们码农来说简直是一场灾难。
所以本人 用sass实现了 thin-border 系列的 minxin
用法如下:按需求将下面四个中的一个 class 赋给 div 即可,不用对div进行任何额外的处理 (此时该 div 的before元素将被占用)
.thin-border-left{ // 只让 left 边实现thin-border
@include thin-border-left(red);
}
.thin-border-right{ // 只让 right 边实现thin-border
@include thin-border-right(red);
}
.thin-border-top{ // 只让 top 边实现thin-border
@include thin-border-top(red);
}
.thin-border-bottom{ // 只让 bottom 边实现thin-border
@include thin-border-bottom(red);
}
.thin-border-all{ // 四个边同时实现thin-border, 其中 5px 为 border-radio 值
@include thin-border-all(red, 5px);
}