一般做了前端一段时间的人都知道,在手机端使用border为1px时在retina屏中会显示2px像素,那是因为我们定义的是css的1px,而物理像素上显示则因为是一个像素代表2个像素,所以出现border为2px,解决方法有很多,我举一个最容易使用的伪元素方法吧。
使用伪元素的方式
.Bbottom:after{
}
//-webkit-transform:scaleY(.5);是为了使高度为1px缩小为0.5;
//注意伪元素使用时,记得定义父级为position:relative;
.Btop:before{
}
当然还会有其他的一些因素会来干扰使用方法:
注意点:
1.手机有各种类型的倍数,ios容易辨别2倍和3倍,但android的不同版本就多了--------解决方法是用media来分别判断并设置(如:@media (-webkit-device-pixel-ratio: 3){})
2.当然原来用一个border:1px solid #000;就能解决的,非得用更多的代码去解决,必然在性能上会有一个影响;权衡得失自行考虑(考虑和设计师谈谈心)
3.更要注意的一点是请考虑兼容性问题,这个也是必须要考虑到的,主流浏览器一般没问题,但是用到了一些webview也好,其他的也好,浏览器的渲染上就是一个问题了,需要值得注意。