拥有一亿会员的爱奇艺如何搭建大数据实时分析平台

预计阅读需要16分钟

吃透移动端 1px，从基本原理到开源解决方案

前言

最近在写移动端 H5 应用，遇到一个值得记录下来的点。现在从它的由来到实现，我们来聊一下移动端 1px，说 1px 不够准确，应该说成 1 物理像素。

通过阅读下面文章，你将会理解以下问题：

问题

  • 为什么有 1px 这个问题？
  • 实现 1px 有哪些方法？这些方法分别有哪些优缺点？
  • 开源项目中& q - I t使用的哪些解决方案？
  • 如何在项目中处理 1px 的相关问题？

由来

基本概念

首先，我们要了解两个概念，一个是像素（pixel）可以简写为px，另外一个是设备像素比（DPR）

像素 ：指在由一个数字序列表示的图像中的一个5 o P f C D D最小单元，单位是 px，不可再次分割了。

设备像素比（DPR）: 设备像素比 = 设备像素 / 设备独立像素。
复制代码

下面我来简单解释下几个概念

  • CSS; - r U % b 像素 (虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 Cf F q &SS 规范中，长度单J e = f i 6 W位可以分为两类，绝对单位以及相对单位。px 是一个相对单位，T b # p u n相对的是设备像素。
  • 设备像素 (物理像素)：指设备能控制m z $ l 5 } $显示的最小物理单位，意指显示器上一个个的点。从屏} n w幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关。
  • 设备独立像素 (逻辑像素)：可以认为v = W 2 + e是计算7 ( N | . I B机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如: CSS 像素)，这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。

也就是说3 ) S I l = { M，当逻辑像素是 1pt 时，在 DPR 为 2 的 设备上显示为 2px 的物理像素

参考数据

各种类型的 iphone 手机屏幕设备的参数

吃透移动端 1px，从基本原理到开源解决方案

注：这里的缩放因子呢，就是 DRP 的值

设计稿对比数据

吃透移动端 1px，从基本原理到开源解决方案

会有人好奇，为什么设计稿上显示是 750x1334 呢，这是因为设计| ~ r x H 1 D稿是显示的物理像素

而我们 css 中的像素是逻辑像素应该为 375x 667，在编写代码时要将自定义宽度设置成 375px

吃透移动端 1px，从基本原理到开源解决方案

那么此时设计稿上的 1px 宽度实际代表的 css 参数应A q B该是 0.5px 对应物理像素 1px，那么怎么实现这个物理像素为 1px 呢

实践

归根结底有两种方案，一种是利用 css 中的transfrom：scaleY(0.5)，另一种是设置 媒体查询根据不同 DPR 缩放

解决方案一

原理

利用 css 的 伪元素::after + transfrom 进行缩放

为什么用伪元素？ 因为伪元素::after或::before是独立于当前( C L a !元素，可以单独对其缩放而不影响元素本身的缩放

伪元素大多数浏览器默认单引号也可以使用，x ` h Y y 7 H和伪类一样形式，而且单引号兼容性（ie）更好些

实现

<div class=\"cell border-1px\"> cell7 m P , U 4 g ~ <div>

<style>
.cell {
    width: 100px;
    height:e [ 2 M B L l v ~ 100px;
}
<!--全0 g w部边框-->
.border, 2 C c [ #-1px:after {
    content: \'7 g : U l ` ^\';
    position: absolute;
    box-s8 a } p 3 3 Tizing: border-Z % p O &box;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    bord? ^ ` 5 D m | &er-radius: 4px;
    -webkit-transform: scale(0.5l . 8 U x ; l);
    transform: scale(0.5);
    -webkit-transform-origin: top left;
}

<!--单边框，以= & * 6上边框为M O S m d Q ? p j例-->
.border-1px-top:before {
    content: \"\";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid red;
    transform: scr 3 [ ealeY(.5);
    transform-origin: left top;
}
</style>

解决方案二（升级方案一）

原理

使用 less 对公共代码（方案一）封装，同时增加媒体查询分别对不同 DPR 的设备，进行不同的缩放

.border(
    @borderWidth: 1px; 
    @borderStyle: solid; 
    @borderColor: @lignt-gray-color; 
    @borderRadius: 0) {
    position: relative;
    &:before {
        content:g ? n X . \'\';
        position: absolute;
        width: 98%;
        height- A _ j & K u 2 9: 98%;
        top: 0;
        left: 0;
        tra 0  p ynsform-origin: left top;
        -webkit-transform-origin: left top;
        box-sizing: bT T f } G * v w 8order-box;
        pointer-events: noV J g % w h { ]ne;
    }
    @medt . ^ u Z s $ X $ia (-w$ v sebkiO I r -t-min-device-pixel-ras L + ~ V ? =tio: 2) {
        &:before {
            width: 200%;
            height: 200%;
            -webkit-transform: scale(.5);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2.5) {
        &p f , 2 X;:before {
            width: 250%;
            height: 250%;
            -webkit-transform: scale(.4);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2.75) {
        &:before {
            width: 275%;
            height: 275%;
            -webkit-transform: scale(1 / 2.75);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 3) {
        &amc 6 % W _ t H {p;:before {
            width: 300%;
            height: 300%;
            transform: scale(1 / 3);
            -webkit-transform: scale(1 / 3);
        }
    }
    .border-radius(@borderRadius);
    &:before {
        border-width: @borderWidth;
        border-style: @borderStyle;
        border-color: @borderColor;
    }
}

.border-all(
	@bU c l D I Xoh ^ C ^ % krderWidth: 1px; 
	@borderStyle: solid; 
	@bordeN ? N + J M z ; %rColor: @lignt-gray-color; 
	@borderRadiu] ~ , K n ;s: 0) {
    .border(@borderWidth; @borderStyle; @borderColor; @borderRadius);
}

其他方案：

  • 使u ? m s Z Q )用图片：兼容性最好，灵活行最差，不能改变颜色、长度
  • 使用 viewport 和 rem，js 动态改变 viewpoO V C F Brt 中 scale 缩放，缺点在于不适用于已有的项目，例如：使用 vh 和 vw 布局的 
<meta name=\"viewport\" id=\"WebViewport\" 
content=w @ f - V h H : }: x d e"initial-sc` | Z Q 2ale=1, maximum-scale=1, 
minimV I R Xum-scale=1, user-scalable=no\">Y m ~ J K % j + B; 
  • 使用 css 渐变lH 0 3 * %inear-gradi} L a y 4ent或者box-shadow

上述 3 种方案均有致命缺陷暂不推荐使用

兼容性

最后看一下兼容性如何，主要是伪元素、transform:scale 和min-dev4 s | +ice-pixel-ratio 这几个关键词的兼容性

吃透移动端 1px，从基本原理到开源解决方案

开源库的解决方案

vant 组件库

跳去 github 查看相关代码

https://github.com/ant- ; 1 C * edesign/ant-design-mobile/blob/master/components7 F J L #/s= z # l ( |tyle/mixins/hairline.less

使用less写的


.hairline-common()m + ` v K H % {
  position: absolute;
  box-sizing: border-box;
  content: B L r a v ~ 5\' \';
  pointer-events: none;
}

.hairline(@color: @border-color)4 j h {
  .hairline-common();

  top: -50%;
  right: -55 ] T )0%;
  bottom: -50%;
  left: -50%;
  border: 0 solid @color;
  transform:d ^ P } . W  k scale(0.5);
}

也是采用第一种解决方案

ant-des[ # z 7 8 6ign-mobile 组件库

跳去 git` t 1 4 $ ; Whub 查看相关代码

.scI | sale-hairline-common(@color, @top, @right, @bottom, @left) {
  content: \'\';
  posit| W } .ion: absolute;
  backgroux u * # O  q dnd-color: @color;
  display: block;
  z-index: 1;
  top: @top;
  right: @right;
  bottom: @bottom;
  l2 e geft: @le6 , Rft;
}

.hairline(@direction, @col } s ^ E K Worj Q B F ! 7 i: @border-color-base) when (@direction = \'top\+ x M 3 q Z k 7 3') {
  border-top: 1PX solid @color;

  html:not([data-scale]) & {
    @media (mi9  0 Z w ) Tn-resolution: 2dppx) {
      border-top: none;

      &::before {
        .scale-hairline-commo= r / [ 8 ( rn(@color, 0, au8 : T ~to, auto, 0);
        width: 100%;
        height: 1PX;
        transform-origiL s } ( o ? 2 Zn: 50% 50%;
        transform: scaleY(0.5);

        @media (mi/ 6 7 zn-resolution: 3dppx) {
          transform: scaleY(f _ _ q @0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base) when (@direR O 4 vction = \'right\') {
  border-right: 1PX solid @color;

  html:not([data-scale]) &ak = v X 5 ; @ !mp; {
    @media (min-resolution: 2dppx) {
      border-right: none;

      &::after {
        .sc^ % - S - m jale-hairline-common(@color, 0, 0, auto, auto);
        width: 1PX;
        height: 100%;
        background: @color;
        transform-origin: 100% 50%;
        transform: scaleX(0.5);

        @media (min-resolution: 3G x jdppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }
}
.hairline(@S N t i V R g zdirectm d I / G m u Rion, @color: @border-colF b s ( _or-base) when (@direction = \'bottom\') {
  border-bottom: 1PX solid @color;
  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-bottom: none;
      &::after {
        .scale-hairline-common(@color@ T L, auto, auto, 0, 0);
        width: 100%;
        height: 1PX;
        tranq 6 7 Y p 6sform-origin: 50% 100%;
        transform: scaleY(0.5);
        @media (Y a  _ u @ g  .min-r0 u  . : 4 . 4esolution: 3dppx) {
          transform: scaleY(0.33);
        }
      }
    }
  }
}

.hairline(@d$ 2 ( C 9 @ W 6 /irection, @color: @border-color-base) when (@directio7 s 7 y ! M N g Kn = \'left\') {
  border-left: 1PX solid @color;

  html:not([data-scale]) &am1 i % ; lp; {
    @media (min-resolution: 2dppx) {
      border-left: none;

      &::before {
        .scale-hairline-common(@color, 0, auto, auto, 0)o  W R x 3 D 2 2;
        widt2 V 3 h W Vh: 1PX;
        heightN 1 H X: 100%;
        transform-origin: 100% 50%;
        transform: scaleX(0.5);

        @media (min-resolution: 3dppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base, @radius: 0) when (@directiom x H O & 5 9n = \'all\~ & ! , Q 4 i e') {
  border: 1P{ ! N B e T w uX solid @color;
  border-radius: @radius;

  html:not([data-scale]+ E t v) & {
    @media (min-resolution: 2dppx) {
      position: relative;
      border: none;

      &::before {
        content: \'F O M w H T G % F\';
        po) Q z hsition: absolutE K X X Qe;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border: 1PX solid @color;
        border-radius: @radius * 2;
        transform-origin: 0 0;
        transform: scale(0.& a V ( E c {5);
        box-sizing: border-box;
        pointer-events:: * q : u K X l j none;

        // @media (min-resolution: 3dppx) {
        //   width: 300%;
        //   height: 300%;
        //   border-radiu^ [ h e ns: @radius * 3;
        //   transform: scale(0.33);
        // }
      }
    }
  }
}

这个值得研究下，比 vant 和 第一种解决方案有点不同，主要在于处理了 DPR 为 2 和为 3 的两种情况，相比来说更加完善。

这里 PX 大写，为了防止插件将 px 转成 rem 等单位

总结

通过该文，你大概了解 1px 问题的来龙去脉了吧，也明白了如何解决{ B J J ` . % A 0相关问题，如果这篇文章能解决C d ~ J { w ,你的疑问或者工作中问题，不妨点个赞收$ ? 7藏下。

由于技术水平有限，文章中如有错误地方3 * a 0 b O，请在评K C x论区指出，感谢！

接下我应该会关于移动端 H5 布局问题和一些踩坑进行一段学习工作总结，不妨点个关注。

作者：小锁君少
链接：https://juejin.iD I e q *m/post/5df3053W z 0 . o w d b 9ce51d45583d425ada
来源：掘金

本文系本站编辑转载，文章版权归原作者所有，内容为作者个人观点，转载目的在于传递更多信息，并不代表本站赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请与本站联系，本站将在第一时间删除内容！
上一篇

新证据表明，地球上最初的生命可能比以前认为的更混乱

下一篇

《逃离比勒陀利亚》：一个木匠的越狱计划

评论已经被关闭。

插入图片
返回顶部