美文网首页
移动端1px解决方案 - 最简单实用的

移动端1px解决方案 - 最简单实用的

作者: 前端_逗叔 | 来源:发表于2021-08-04 09:38 被阅读0次

    前言

    相信只要搞过移动web开发的小伙伴们应该都遇到过这个问题,UI设计师给的ui图里面明明设置的边框是 1px,然后前端代码里面也写的是 border:1px solid #ddd; ,但是在用不同真机进行测试的时候就会发现这 1px 会比较粗,明明就是按照ui图写的为什么就不一样呢?

    当你还在纳闷的时候,测试小姐姐早已在禅道里面悄悄的给你记上了一个bug

    为什么会变粗呢?

    要知道为什么会变粗,首先你得了解以下几个概念:

    • 物理像素
    • 设备独立像素(或者叫逻辑像素)
    • 物理像素比 (DPR)
    • 视口

    如果你还不了解这些概念,那么我推荐你看看我的另外一篇文章移动web开发需要知道的那些概念 (juejin.cn) ,在这篇文章中详细的介绍了这些概念,读完你就会恍然大悟,原来怎么因为这样才变粗的啊。

    解决方案

    废话就不多说了,我们直接上解决方案。对于利用 border-imagebackground-image渐变属性来实现的方式这里不多说,这些方式都不够简单灵活,而且不好懂。

    点我查看解决方案示例

    1. 把border设置为小数

    媒体查询利用物理像素比 (DPR)缩放,把border设置为小数像素,css中通过-webkit-min-device-pixel-ratio获取DPR

    .border1 {
      border: 1px solid #e8e8e8
    }
    
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      .border1 {
        border: 0.5px solid #e8e8e8
      }
    }
    
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
      .border1 {
        border: 0.333333px solid #e8e8e8
      }
    }
    
    image.png
    【优缺点】
    1. 不是所有的浏览器都支持渲染小数
    2. 现在手机的dpr简直就是五花八门的,就比如我自己的红米k40的dpr2.75,如果你不知道自己设备dpr请点我查看设备的dpr
    3. 简单的用周边同事的手机测试了一下,都是支持的,如果要求不高,这种方式最简单省事

    2.box-shadow

    [class*='box-shadow']{
      height: 50px;
      width: 100%;
      font-size: 12px;
      text-align: center;
      line-height: 50px;
      margin-bottom: 8px;
      background: white;
    }
    .box-shadow-top {
      box-shadow: inset 0px 1px 1px -1px red;
    }
    .box-shadow-bottom {
      box-shadow: inset 0px -1px 1px -1px red;
    }
    .box-shadow-left {
      box-shadow: inset 1px 0px 1px -1px red;
    }
    .box-shadow-right {
      box-shadow: inset -1px 0px 1px -1px red;
    }
    .box-shadow-surround{
      box-shadow: inset 0px 0px 1px 0px red
    }
    
    2d17520d39bd254d4d164e50fdbc3ed.jpg

    【优缺点】

    1. 这种方式够简单,代码很少
    2. 有阴影,并且设置的颜色与显示的颜色不一样,显示的会变淡

    3. transform + 伪类 【推荐】

    Vant UI中就是采用的这种方式

    [class*='van-hairline']::after {
        position: absolute;
        box-sizing: border-box;
        content:' ';
        pointer-events: none;
        top: -50%;
        right: -50%;
        bottom: -50%;
        left: -50%;
        border: 0 solid #ebedf0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    .van-hairline, .van-hairline--top, .van-hairline--left, .van-hairline--right, .van-hairline--bottom, .van-hairline--surround, .van-hairline--top-bottom {
        position: relative;
    }
    .van-hairline--top::after {
        border-top-width: 1px;
    }
    .van-hairline--left::after {
        border-left-width: 1px;
    }
    .van-hairline--right::after {
        border-right-width: 1px;
    }
    .van-hairline--bottom::after {
        border-bottom-width: 1px;
    }
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
        border-width: 1px 0;
    }
    .van-hairline--surround::after {
        border-width: 1px;
    }
    /*圆角,这是我自己写的,vant中没有自带*/
    .van-hairline-round::after{
      border-radius: 8px;
    }
    
    <!-- 上边框 --> 
    <div class="van-hairline--top"></div> 
    <!-- 下边框 --> 
    <div class="van-hairline--bottom"></div> 
    <!-- 左边框 --> 
    <div class="van-hairline--left"></div> 
    <!-- 右边框 --> 
    <div class="van-hairline--right"></div> 
    <!-- 上下边框 --> 
    <div class="van-hairline--top-bottom"></div> 
    <!-- 全边框 --> 
    <div class="van-hairline--surround"></div>
    <!-- 圆角边框 --> 
    <div class="van-hairline--surround van-hairline-round"></div>
    
    5d1230090ed0a92c0fc0a4e57d798d5.jpg

    【优缺点】

    1. 兼容性好,可修改颜色,支持圆角
    2. 没有根据dpr来匹配不同的机型
    3. 日常工作中已经完全够用了,能做到这份儿上就不再去纠结了
    4. 如果你还纠结的话自行添加媒体查询就行了(目前我看到的DPR有2、2.5、2.75、3)

    相关文章

      网友评论

          本文标题:移动端1px解决方案 - 最简单实用的

          本文链接:https://www.haomeiwen.com/subject/gxszmltx.html