1像素边框,真的是1像素吗?

我们在html中,如果要设置一个1像素的边框,最常见的就是border: 1px solid #000; 这句就表示设置一个1像素的,实心的,黑色的边框。这个css语句,在pc上毫无问题,但是随着移动web的兴起,貌似就有些问题了。可以试验一下,把这句放到手机浏览器中显示一下,然后屏幕截图,你会惊奇的发现,1px已经显示为2px了。如果你放到iphone6 plus下,你会更神奇的发现,居然是3px。

那么,为什么设置为1px的边框,在手机下会显示为2px,甚至3px呢?其实,这就是retina屏幕搞的鬼。

至于retina的原理,这里就不多介绍了,retina的做法是把1像素分割成4个像素显示,这样看起来更细腻,但其实还是1像素。所以,1px的边框,在retina屏幕上就会显示成2px的宽度。

这个不是我们希望的,怎么办呢?我们可以用一些方法来解决这个问题。

第一个方法最简单,在ios8以上的iphone中,支持0.5像素显示,所以,只要设置为0.5就可以了。

Hairline Border

Standrad border syntax;

div{

border:1px solid black;

}

Retina hairline border syntax:

@media(-webkit-min-device-pixel-ratio:2){

div{

border-width:0.5px;

     }

}

这个很简单,但是,仅仅支持ios8以上的iphone,安卓不兼容,会显示为0。所以,这个不是一个好办法。即该解决方案需要写hack兼容老旧系统。

三种方案:

1、JS判断UA,是否是ios8+,是的话则输出类名hairlines,为了防止重绘,这段代码加在head里即可。

if (/iP(hone|od|ad)/.test(navigator.userAgent)) {

var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),

version = parseInt(v[1], 10);

if(version >= 8){

document.documentElement.classList.add('hairlines')

}

}

2、JS判断是否支持0.5px边框,是的话,则输出类名hairlines。

if (window.devicePixelRatio && devicePixelRatio >= 2) {

var testElem = document.createElement('div');

testElem.style.border = '.5px solid transparent';

document.body.appendChild(testElem);

if (testElem.offsetHeight == 1)

{

document.querySelector('html').classList.add('hairlines');

}

document.body.removeChild(testElem);

}

// This assumes this script runs in , if it runs in wrap it in $(document).ready(function() {   })

相比于第一种方法,这种方法的可靠性更高一些,但是需要把js放在body标签内,相对来说会有一些重绘,个人建议是用第一种方法。

3、服务端做ios版本判断,输出相应的类名,相比于JS的实现,个人更倾向于在服务端完成,这样前端也少几行代码,并且更加可靠。如在wormhole里的实现(wormhole是nodejs环境下的一个服务端渲染模版的容器):

{{#if($plugins.detector.os.name === "ios" && $plugins.detector.os.version >= 8)}}

{{set (hairlines = "hairlines")}}

{{/if}}

加上类名后,就可以针对该类名写相应的css了。比如:

div{border:1px solid #000}

.hairlines div{border-width:0.5px}

也许你会问,那ios7以下和其他android机下怎么搞?我的建议是:还是维持老样,不去处理,随着时间的推移,我相信最终都会支持0.5 和 0.3 px边框的。

如果硬要兼容,怎么整?方案也有很多,稍微介绍下:

1、通过viewport + REM的方式来兼容。目前这种兼容方案相对比较完美,适合新项目(老项目改用REM单位成本会比较高)。 淘宝M首页 就是这种方案。

在devicePixelRatio = 2 时,输出viewport

在devicePixelRatio = 3 时,输出viewport

同时通过设置对应viewport的rem基准值,这种方式就可以像以前一样轻松愉快的写1px了。

其他方案(该部分内容来源于妙净同学的分享):

2、 transform: scale(0.5)

实现方式

height:1px;

-webkit-transform: scaleY(0.5);

-webkit-transform-origin:0 0;

overflow: hidden;

缺点不少:圆角无法实现,hack代码多,实现4条边框比较闹心。只能单独使用,如果嵌套,scale的作用也会对包含的元素产生,不想要的影响,所以此种方案配合:after和:before独立使用较多,比如画一个商品的边框四条线,容器的after和before可以画2条线,利用容器的父元素的after、before再画2条线。

.after-scale{

position: relative;

}

.after-scale:after{

content:"";

position: absolute;

bottom:0px;

left:0px;

right:0px;

border-bottom:1px solid #c8c7cc;

-webkit-transform:scaleY(.5);

-webkit-transform-origin:0 0;

}

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,iVBORw0KGgoAABABJRU5ErkJggg==") 2 0 stretch;

border-width: 0px 0px 1px;

}

缺点:也可以通过修改图片来达到圆角的效果,但是由于图片的原因,压缩过后的图片边缘变模糊了(不放大的情况下不明显),需要引用图片或者base64,边框颜色修改起来不方便。

你可能感兴趣的:(1像素边框,真的是1像素吗?)