Web开发编程网
分享Web开发相关技术

解决移动端1px Border

今天聊聊解决移动端1px border的问题,当我们进行移动端开发需要实现1px的border是,可能会写下如下代码:

border-bottom:1px solid black;

写完一看,border实现,但仔细看会发现,这怎么成了2px,what happened? 其实,这时移动设备的DPR导致的

何为DPR

DPR,Device-Pixel-Retio,设备像素比,就是设备物理像素与视觉像素的比值,比如一台手机设备物理像素为2560px,浏览器宽度是1280px,那么DRP就是2,可以在控制台打印window.devicePixelRatio查看,移动端DPR=2,所以实际是2px的border,这里提供两种解决方法

viewport

head标签加上一行代码

<meta name='viewport' content='width=device-width,initial-scale=0.5'>

通过手动设置页面缩放比例为0.5,2px的border就会自动变成1px,该方案十分方便,一行代码即可解决麻烦,缺点是对老项目来说需要大量修改已有布局的尺寸

伪元素+transform

原理是利用:before or :after来重做border,通过transform实现缩放

 .content{
     positon:relative;
     border:none;
 }
 .content:after{
     content:'';
     position:absolute;
     width:100%;
     height:1px;
     bottom:0;
     background:black;
     transform:scaleY(0.5);
 }

作者:Webwwl
链接:https://juejin.im/post/5a9abe7b6fb9a028da7bfef6
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

未经允许不得转载:WEB开发编程网 » 解决移动端1px Border
微信扫码关注微信公众号

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。