移动端border为1px的设置方法

一般做了前端一段时间的人都知道,在手机端使用border为1px时在retina屏中会显示2px像素,那是因为我们定义的是css的1px,而物理像素上显示则因为是一个像素代表2个像素,所以出现border为2px,解决方法有很多,我举一个最容易使用的伪元素方法吧。

使用伪元素的方式
.Bbottom:after{
    position:absolute;
    content: "";
    height:1px;
    background:#d5d5d5;
    width:100%;
    bottom:0;
    -webkit-transform:scaleY(.5);
    -ms-transform:scaleY(.5);
    -o-transform:scaleY(.5);
    transform:scaleY(.5);
}
//-webkit-transform:scaleY(.5);是为了使高度为1px缩小为0.5;
//注意伪元素使用时,记得定义父级为position:relative;
.Btop:before{
    position:absolute;
    content: "";
    height:1px;
    background:#d5d5d5;
    width:100%;
    top:0;
    -webkit-transform:scaleY(.5);
    -ms-transform:scaleY(.5);
    -o-transform:scaleY(.5);
    transform:scaleY(.5);
}

当然还会有其他的一些因素会来干扰使用方法:
注意点:
1.手机有各种类型的倍数,ios容易辨别2倍和3倍,但android的不同版本就多了--------解决方法是用media来分别判断并设置(如:@media (-webkit-device-pixel-ratio: 3){})
2.当然原来用一个border:1px solid #000;就能解决的,非得用更多的代码去解决,必然在性能上会有一个影响;权衡得失自行考虑(考虑和设计师谈谈心)
3.更要注意的一点是请考虑兼容性问题,这个也是必须要考虑到的,主流浏览器一般没问题,但是用到了一些webview也好,其他的也好,浏览器的渲染上就是一个问题了,需要值得注意。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值