首页 > 代码库 > 手机端一像素问题
手机端一像素问题
由于手机dpr(设备像素比)的问题,webapp中经常会出现1像素边框的问题,解决办法如下
//以下代码是使用sylus实现
border-1px($color){
position:relative;
&:after{
display:block;
position:absolute;
left:0;
bottom:0;
border-top:1px solid $color;
content:‘ ‘;
width:100%;
}
}
//解决办法
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
以上代码可设置在公共样式中,使用示例
<div class="tab border-1px"></div>
手机端一像素问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。