移动端开发1px边框问题

移动端中1px边框问题

问题描述:

  • 移动端给元素添加1px边框,有的手机会不显示边框

原因分析:

  • CSS像素为1px宽的直线,对应的物理像素是不同的,可能是2px或者3px,而设计师想要的1px宽的直线,其实就是1物理像素宽。

  • 对于CSS而言,可以认为是border: 0.5px;,这是多倍屏下能显示的最小单位。然而,并不是所有手机浏览器都能识别border: 0.5px,有的系统里,0.5px会被当成为0px处理

  • 这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。


解决方案:

  • 1.border-image
    基于media查询判断不同的设备像素比给定不同的border-image
.border_1px{
          border-bottom: 1px solid #000;
        }
@media only screen and (-webkit-min-device-pixel-ratio:2){
      .border_1px{
             border-bottom: none;
             border-width: 0 0 1px 0;
             border-image: url(../1px.png) 0 0 2 0 stretch;
          }
     }
优点:可以设置单条、多条表框。
缺点:更换颜色和样式麻烦,某些设备上会模糊。
  • 2.background-image
    和border-image类似,准备一张符合条件的边框背景图,模拟在背景上
.border_1px{
          border-bottom: 1px solid #000;
        }
@media only screen and (-webkit-min-device-pixel-ratio:2{
    .border_1px{
            background: url(../img/1px.png) repeat-x left bottom;
            background-size: 100% 1px;
            }
        }
优点:可以设置单条、多条表框。
缺点:更换颜色和样式麻烦,某些设备上会模糊
  • 3.伪元素+transform
    基于media查询判断不同的设备像素比对线条进行缩放
border1px-after() 
    content ' '
    position absolute
    box-sizing border-box
    pointer-events none

border-all($color=#ccc, $radius=0)
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
        &:after {
            border1px-after()
            transform-origin top left
            top 0
            left 0
            width 150%
            height 150%
            transform scale(.66667, .66667)
            border 1px solid $color /* px2rpx: no */
            border-radius $radius /* px2rpx: no */
        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        &:after {
            border1px-after()
            transform-origin top left
            top 0
            left 0
            width 200%
            height 200%
            transform scale(.5, .5)
            border 1px solid $color /* px2rpx: no */ 
            border-radius $radius /* px2rpx: no */
        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
        &:after {
            border1px-after()
            transform-origin top left
            top 0
            left 0
            width 300%
            height 300%
            transform scale(.33333, .33333)
            border 1px solid $color /* px2rpx: no */
            border-radius $radius /* px2rpx: no */
        }
    }

优点:可以满足所有场景,且修改灵活。
缺点:对于已使用伪类的元素要多层嵌套。
  • 4.用JS计算rem基准值和viewport缩放值
/* 设计稿是750,采用1:100的比例,font-size为100 * (docEl.clientWidth * dpr / 750) */
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
scale = 1 / dpr;
// 设置viewport,进行缩放,达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性,留作的css hack之用,解决图片模糊问题和1px细线问题
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
用JS根据屏幕尺寸和dpr精确地设置不同屏幕所应有的rem基准值和initial-scale缩放值,完美解决了1px细线问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值