• 移动端1px问题


    参考地址:https://juejin.im/post/6874940963635232775

    参考地址:https://juejin.im/post/6844903877947424782

    参考地址:https://juejin.im/entry/6844903456717668359

    CSS像素、设备独立像素、设备像素之间关系:https://www.cnblogs.com/jiangzilong/p/6700023.html

    移动端web开发中,UI设置的边框为1px,前端开发过程中也设置border:1px,测试会发现在retina屏中,1px会比较粗,这就是经典的移动端1px问题。

    retina屏:在一个逻辑像素上用多个物理像素去展示,dpr=window.devicePixelRatio=物理像素/CSS像素,dpr为1时,1个逻辑像素,也是使用1个物理像素显示;dpr为2时,1个逻辑像素,使用4个物理像素组成;可以理解为retina屏上的一个逻辑像素被横向和竖向分割了dpr份,每份就是一个物理像素点。

    例如:iPhone6的设备像素比dpr为2,物理像素是750(x轴),它的逻辑像素是375,则映射到物理像素上就是2px,dpr为3同理。

     解决办法:

    1. 0.5px方案

     IOS8+苹果支持0.5px,借助媒体查询处理

    . border { border: 1px solid #999;}
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      . border { border: 0.5px solid #999;}      
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
      . border { border: 0.333333px solid #999;}      
    }

     缺点:0.46px的时候不显示,IOS7及一下和Android等其他系统里,0.5px将会被显示为0px。所以还需要判断是否支持0.5px

    if (window.devicePixelRatio && devicePixelRatio >= 2) {
      var testElem = document.createElement('div');
      testElem.style.border = '.5px solid transparent';
      document.body.appendChild(testElem);
      if (testElem.offsetHeight == 1) {
        document.querySelector('html').classList.add('hairlines');
      }
      document.body.removeChild(testElem);
    }
    // 脚本应该放在body内,如果在里面运行,需要包装 $(document).ready(function() {})
    div {
      border: 1px solid #bbb;
    }
    .hairlines div {
      border- 0.5px;
    }

     2. 伪类+transform(推荐)

    原理:把原先元素的border去掉,然后利用:before或者:after重做border,并transform的scale缩小一半,原先的元素相对定位,新做的border绝对定位。

    /*手机端实现真正的一像素边框*/
    .border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
        position: relative;
    }
    
    /*线条颜色 黑色*/
    .border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
        background-color: #000;
    }
    
    /*底边边框一像素*/
    .border-bottom-1px::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        transform-origin: 0 0;
    }
    
    /*上边边框一像素*/
    .border-top-1px::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        transform-origin: 0 0;
    }
    
    /*左边边框一像素*/
    .border-left-1px::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 100%;
        transform-origin: 0 0;
    }
    
    /*右边边框1像素*/
    .border-right-1px::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 100%;
        transform-origin: 0 0;
    }
    
    /*边框一像素*/
    .border-1px::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 1px solid gray;
    }
    
    
    /*设备像素比*/
    /*显示屏最小dpr为2*/
    @media (-webkit-min-device-pixel-ratio: 2) {
        .border-bottom-1px::after, .border-top-1px::after {
            transform: scaleY(0.5);
        }
    
        .border-left-1px::after, .border-right-1px::after {
            transform: scaleX(0.5);
        }
    
        .border-1px::after {
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            transform-origin: 0 0;
        }
    }
    
    /*设备像素比*/
    @media (-webkit-min-device-pixel-ratio: 3)  {
        .border-bottom-1px::after, .border-top-1px::after {
            transform: scaleY(0.333);
        }
    
        .border-left-1px::after, .border-right-1px::after {
            transform: scaleX(0.333);
        }
    
        .border-1px::after {
            width: 300%;
            height: 300%;
            transform: scale(0.333);
            transform-origin: 0 0;
        }
    }
    /*需要注意<input type="button">是没有:before, :after伪元素的*/

    优点:所有场景都能满足,支持圆角(伪类和本体类都需要加border-radius)。

    缺点:代码量也很大,对于已经使用伪类的元素,可能需要多层嵌套。

    3. viewport + rem(推荐)

    通过设置对应viewport的rem基准值,这种方式就可以像以前一样轻松愉快的写1px了。

    在devicePixelRatio=2时,设置meta:

    <meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

    在devicePixelRatio=3时,设置meta:

    <meta name="viewport" content="width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

    实例验证:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>移动端1px问题</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta name="viewport" id="WebViewport"
            content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
        <style>
            html {
                font-size: 11px;
            }
            body {
                padding: 1rem;
            }
            * {
                padding: 0;
                margin: 0;
            }
            .item {
                padding: 1rem;
                border-bottom: 1px solid gray;
                font-size: 1.2rem;
            }
        </style>
        <script>
            var viewport = document.querySelector("meta[name=viewport]");
            var dpr = window.devicePixelRatio || 1;
            var scale = 1 / dpr;
            //下面是根据设备dpr设置viewport
            viewport.setAttribute(
                "content", +
                "width=device-width," +
                "initial-scale=" +
                scale +
                ", maximum-scale=" +
                scale +
                ", minimum-scale=" +
                scale +
                ", user-scalable=no"
            );
    
            var docEl = document.documentElement;
            var fontsize = 10 * (docEl.clientWidth / 320) + "px";
            docEl.style.fontSize = fontsize;
        </script>
    </head>
    <body>
        <div class="item">border-bottom: 1px solid gray;</div>
        <div class="item">border-bottom: 1px solid gray;</div>
    </body>
    </html>

    优点:所有场景都能满足,一套代码,可以兼容基本所有布局。

    缺点:老项目修改代价太大,只适用于新项目。

    4.border-image

     首先准备一张符合你要求的border-image,通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成750*1334的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。同样,在使用border-image时,将border设计为物理1px,如下:

     

    样式设置:

    .border-image-1px {
        border-width: 0 0 1px 0; // 上 右 下 左
        border-image: url(linenew.png) 0 0 2 0 stretch; //
    }

    上文是把border设置在边框的底部,所以使用的图片是2px高,上部的1px颜色为透明,下部的1px使用视觉规定的border的颜色。如果边框底部和顶部同时需要border,可以使用下面的border-images,

    样式设置:

    .border-image-1px {
        border-width: 1px 0; // 上下 左右
        border-image: url(linenew.png) 2 0 stretch;
    }

    到目前为止,我们已经能在iPhone上展现1px border的效果了。但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象,于是使用Media Query做了一些兼容,样式设置如下:

    .border-image-1px {
        border-bottom: 1px solid #666;
    } 
    
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .border-image-1px {
            border-bottom: none;
            border-width: 0 0 1px 0;
            border-image: url(../img/linenew.png) 0 0 2 0 stretch;
        }
    }

    优点:可以设置单条,多条边框,没有性能瓶颈的问题

    缺点:修改颜色麻烦,需要替换图片;圆角需要特殊处理,并且边缘会模糊

    5. background-image

    background-image跟border-image的方法一样,你要先准备一张符合你要求的图片。然后将边框模拟在背景上:

    样式设置:

    .background-image-1px {
      background: url(../img/line.png) repeat-x left bottom;
      background-size: 100% 1px;
    }

    优点:可以设置单挑,多条边框,没有性能瓶颈的问题。

    缺点:修改颜色麻烦,需要替换图片;圆角需要特殊处理,并且边缘会模糊。

    6. postcss-write-svg

    使用border-image每次都要去调整图片,总是需要成本的。基于上述的原因,我们可以借助于PostCSS的插件postcss-write-svg来帮助我们。如果你的项目中已经有使用PostCSS,那么只需要在项目中安装这个插件。然后在你的代码中使用:

    @svg 1px-border {
        height: 2px;
        @rect {
          fill: var(--color, black);
          width: 100%;
          height: 50%;
        }
    }
    .example {
        border: 1px solid transparent;
        border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
     }

    这样PostCSS会自动帮你把CSS编译出来

    .example {
        border: 1px solid transparent;
        border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E")
              2 2 stretch;
      }

    这个方案简单易用,基本能达到我所需要的需求。

    7. box-shadow

    box-shadow: inset 0px -1px 1px -1px black;

    优点:使用简单,圆角可以实现

    缺点:模拟的实现方法,仔细看就会都分辨出不是边框

    8. 多背景渐变实现

    与background-image方案类似,只是将图片替换为css3渐变。设置1px的渐变背景,50%有颜色,50%透明。

    .background-gradient-1px {
    background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
    linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
    linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
    }
    /* 或者 */
    .background-gradient-1px{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
    background-size: 100% 1px;
    }
  • 相关阅读:
    js-异步机制与同步机制
    js-正则表达式
    js-注释代码习惯
    布局-块级元素水平垂直居中
    js-本地调试跨域
    vue2-项目资源收集
    git 忽略文件夹
    运行npm run eject报错解决方法
    柯里化函数
    常用正则表达式总结
  • 原文地址:https://www.cnblogs.com/myc-xiaochaochao/p/13775526.html
Copyright © 2020-2023  润新知