Hairline CSS
.hairline-border {
box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
.hairline-border {
box-shadow: 0 0 0 0.5px;
}
}
@media (min-resolution: 3dppx) {
.hairline-border {
box-shadow: 0 0 0 0.33333333px;
}
}
@media (min-resolution: 4dppx) {
.hairline-border {
box-shadow: 0 0 0 0.25px;
}
}
也许你会问，那ios7以下和其他android机下怎么搞？我的建议是：还是维持老样，不去处理，随着时间的推移，我相信最终都会支持0.5 和 0.3 px边框的。 如果硬要兼容，怎么整？方案也有很多，稍微介绍下： 1、通过viewport + REM的方式来兼容。目前这种兼容方案相对比较完美，适合新项目（老项目改用REM单位成本会比较高）。 淘宝M首页 就是这种方案。 在devicePixelRatio = 2 时，输出viewport 在devicePixelRatio = 3 时，输出viewport 同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。 作者：Leslie_2386 链接：https://www.jianshu.com/p/f81112a2ec77 來源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。