为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解。因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。
devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是
devicePixelRatio = 物理像素 / 独立像素。
复制代码
效果如下图:
很明显图一要比图二更粗,这就是所谓的1px区别,当然在pc端上效果是一样的。实现方法
- 伪类 + transform
li{position: relative;}
li:after{
position: absolute;
bottom:0;
left:0;
content: '';
width:100%;
height:1px;
border-top:1px solid black;
transform: scaleY(0.5);//注意兼容性
}
复制代码
这种方式的原理很简单,就是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。个人认为这是比较完美的做法。
- viewport + rem(ios)
同时通过设置对应viewport的rem基准值,这种方式就可以像以前一样轻松愉快的写1px了。
在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">
复制代码
这种兼容方案相对比较完美,适合新的项目,老的项目修改成本过大,详细请参考。
- 使用box-shadow模拟边框
利用css 对阴影处理的方式实现0.5px的效果。
.box-1px {
box-shadow: inset 0px -1px 1px -1px black;
}
复制代码
这是我自认为比较简便的几种方法,当然也还有其他的实现方式,这个看个人喜欢吧。不喜勿喷,谢谢!