一直以来我们实现边框的方法都是设置 border: 1px solid #ccc
,但是在retina
屏上因为设备像素比的不同,边框在移动设备上的表现也不相同:1px
可能会被渲染成1.5px, 2px, 2.5px, 3px....
,在用户体验上略差,所以现在要解决的问题就是在retina
屏幕实现1px
边框。
如果你去google
类似问题,诚然会找到所谓的”答案“,然后很开森的用到项目中了。运气好的话,Yeah成功模拟1px了,运气不好了可能遇到各种奇葩的表现让你抓狂。
这篇文章总结了目前常用的模拟1px
的方法,并分析各个方法的利弊。
‘软图片’,即通过CSS渐变模拟,代码如下:
.retina(@top: transparent, @right: transparent, @bottom: transparent, @left: transparent, @w: 1px) { @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { border: none; background-image: linear-gradient(180deg, @top, @top 50%, transparent 50%), linear-gradient(270deg, @right, @right 50%, transparent 50%), linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%), linear-gradient(90deg, @left, @left 50%, transparent 50%); background-size: 100% @w, @w 100%, 100% @w, @w 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top; } } |
这段代码可能是从网上找到的出现最频繁的代码了,但是这样写是有兼容问题的,
测试小米2自带浏览器、手机百度、百度浏览器都显示不出上边框,如图:
测试小米2 chrome浏览器正常,如图:
这种情况我们会考虑是不是没有写浏览器前缀-webkit-
的原因,好,我们加上:
background-image: -webkit-linear-gradient(180deg, @top, @top 50%, transparent 50%), -webkit-linear-gradient(270deg, @right, @right 50%, transparent 50%), -webkit-linear-gradient(0, @bottom, @bottom 50%, transparent 50%), -webkit-linear-gradient(90deg, @left, @left 50%, transparent 50%); |
再次检测小米2自带浏览器、手机百度、百度浏览器、chrome,这一次表现都一致!慢着好像有些不对:
怎么会这样呢??看样子是渐变方向不对,通过调整渐变方向得到结果:加上-webkit
私有前缀的0deg
的渐变方向是从左向右,而规范定义的0deg
的渐变方向是自下而上。
知道原因了,我们再改改代码吧:
background-image: -webkit-linear-gradient(270deg, @top, @top 50%, transparent 50%), -webkit-linear-gradient(180deg, @right, @right 50%, transparent 50%), -webkit-linear-gradient(90deg, @bottom, @bottom 50%, transparent 50%), -webkit-linear-gradient(0, @left, @left 50%, transparent 50%); background-image: linear-gradient(180deg, @top, @top 50%, transparent 50%), linear-gradient(270deg, @right, @right 50%, transparent 50%), linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%), linear-gradient(90deg, @left, @left 50%, transparent 50%); |
Done!
优点:
缺点:
padding
,如设置子元素的背景可能会挡住父元素所设置的1px软图片background-color
,不然会不小心覆盖掉retina
屏,需要写 border: 1px solid #f00
进行适配‘缩放’,即使用css transform
缩放一半的大小,代码如下:
.transform-scale { position: relative; &:after, &:before { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; background: #f00; } &:after { top: auto; bottom: 0; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } } |
优点:
缺点:
clearfix
.shadow {
-webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
}
|
没觉得这个方法好用,模拟的效果差强人意,颜色也不好配置,不推荐
终于等来了0.5px
,虽然只有IOS8+
才支持
// IOS8 hairline .hairline(@color, @style:solid) { @media (-webkit-min-device-pixel-ratio: 2) { border: 0.5px @style @color; } } |
优点:
缺点:
IOS8+
才支持,在IOS7及其以下、安卓系统都是显示为0px再谈mobile web retina 下 1px 边框解决方案介绍了viewport
结合rem
解决设备像素比的问题,即让我们像以前写1倍像素那样写页面。
如在devicePixelRatio=2
下设置<meta>
:
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
|
再设置rem
,假设header的高度是30px(设备像素比为1的情况):
html { font-size: 20px; } header { height: 3rem; } |
没有具体实践过,不知道有神马坑~
PS:淘宝、美团移动端页面都是采用这个方式实现的
使用的背景图片:
代码:
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url(border.png) 2 0 stretch;
border-image: url(border.png) 2 0 stretch;
}
|
优点:
缺点:
1、0.5px
,相信浏览器肯定是会慢慢支持的;目前而言,如果能用的话,可以hack一下;
2、阴影,border-image
的方案不建议使用(用了你就知道。。。)
3、背景图片和缩放可以在项目中配合使用,如单个线条使用缩放,四条框用背景图片模拟,额,如果要圆角的话,无能无力了
阅读详情 -> 1px on retina | EFE Tech.