• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > Div+Css >  CSS手机下0.5px实现正文

CSS手机下0.5px实现

作者:网页模板
类型:文章教程
点击次数:
发布时间:2019-06-19 14:03
分享到:
    我爱模板网在做混合APP开发时,遇到了一个问题,即边框0.5px效果。
    0.5px其实是不存在的,因为像素点不可能存在半像素,现在的手机大多都是视网膜屏,逻辑像素都是物理像素的两三倍,我们通常用CSS写的像素尺寸,实际上是逻辑像素,显示到手机上转换成物理像素往往都是放大两到三倍,也就是说0.5px,显示出来的实际是1px,而CSS写的1px,显示出来实际是2px左右。所以才会出现明明边框是1px,却看起来比较粗。
    我爱模板网于是在代码中,边框都是这么写的:
border-bottom:0.5px solid red;
    在大多数手机下,都没有问题,但是不知道为何在oppo手机下,有时候不显示。最后,用CSS3的缩放实现,发现都没问题了,在这里记录下:
.bottom1px{position: relative;}
.bottom1px:after{
    display: block;
    content: " ";
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    position: absolute;
    bottom:-1px;
    left: 0;
    right: 0;
    z-index:1;
}

(责任编辑:网页模板)
  • 本文标签:
  • 0.5px
用css画一个QQ浏览器图标
CSS写个精美的手机登录页面