吃透挪动端 1px的实际用法

2020-10-09 19:51 jianzhan

近期在写挪动端 H5 运用,遇到1个值得纪录下来的点。如今从它的来历到完成,大家来聊1下挪动端 1px,说 1px 不足精确,应当说成 1 物理学像素

根据阅读文章下面文章内容,你可能了解下列难题:

难题

  • 为何有 1px 这个难题?
  • 完成 1px 有哪些方式?这些方式各自有哪些优缺陷?
  • 开源系统新项目中应用的哪些处理计划方案?
  • 怎样在新项目中解决 1px 的有关难题?

来历

 基础定义

最先,大家要掌握两个定义,1个是 像素(pixel) 能够简写为 px ,此外1个是 机器设备像素比(DPR)

像素 :指在由1个数据编码序列表明的图象中的1个最少模块,企业是 px,不能再度切分了。

机器设备像素比(DPR): 机器设备像素比 = 机器设备像素 / 机器设备单独像素。拷贝编码

下面我来简易解释下几个定义

  • CSS 像素 (虚似像素):指的是 CSS 款式编码中应用的逻辑性像素,在 CSS 标准中,长度企业能够分成两类,肯定企业和相对性企业。px 是1个相对性企业,相对性的是机器设备像素。
  • 机器设备像素 (物理学像素):指机器设备能操纵显示信息的最少物理学企业,意指显示信息器上1个个的点。从显示屏在加工厂生产制造出的那天起,它上面机器设备像素点就固定不动不会改变了,和显示屏尺寸尺寸相关。
  • 机器设备单独像素 (逻辑性像素):能够觉得是测算机座标系统软件中得1个点,这个点意味着1个能够由程序流程应用的虚似像素(例如: CSS 像素),这个点是沒有固定不动尺寸的,越小越清楚,随后由有关系统软件变换为物理学像素。 也便是说,当逻辑性像素是 1pt 时,在 DPR 为 2 的 机器设备上显示信息为 2px 的物理学像素

 参照数据信息

各种各样种类的 iphone 手机上显示屏机器设备的主要参数

注:这里的放缩因素呢,便是 DRP 的值

设计方案稿比照数据信息

会有人好奇心,为何设计方案稿上显示信息是 750x1334 呢,这是由于设计方案稿是显示信息的 物理学像素

而大家 css 中的像素是 逻辑性像素 应当为 375x 667,在撰写编码时要将自定宽度设定成 375px

那末此时设计方案稿上的 1px 宽度具体意味着的 css 主要参数应当是 0.5px 对应物理学像素 1px,那末如何完成这个物理学像素为 1px 呢

实践活动

说到底有两种计划方案,1种是运用 css 中的 transfrom:scaleY(0.5) ,另外一种是设定 新闻媒体查寻依据不一样 DPR 放缩

处理计划方案1

基本原理

运用 css 的 伪元素 ::after + transfrom 开展放缩

为何用伪元素?由于伪元素 ::after::before 是单独于当今元素,能够独立对其放缩而不危害元素自身的放缩

伪元素大多数数访问器默认设置单引号还可以应用,和伪类1样方式,并且单引号适配性(ie)更好些

完成

<div class="cell border⑴px"> cell <div>

<style>
.cell {
    width: 100px;
    height: 100px;
}
<!--所有边框-->
.border⑴px:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: top left;
}

<!--单侧框,以上边框为例-->
.border⑴px-top:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid red;
    transform: scaleY(.5);
    transform-origin: left top;
}
</style>

处理计划方案2(升級计划方案1)

基本原理

应用 less 对公共性编码(计划方案1)封裝,另外提升新闻媒体查寻各自对不一样 DPR 的机器设备,开展不一样的放缩

.border(
    @borderWidth: 1px; 
    @borderStyle: solid; 
    @borderColor: @lignt-gray-color; 
    @borderRadius: 0) {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        width: 98%;
        height: 98%;
        top: 0;
        left: 0;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        box-sizing: border-box;
        pointer-events: none;
    }
    @media (-webkit-min-device-pixel-ratio: 2) {
        &:before {
            width: 200%;
            height: 200%;
            -webkit-transform: scale(.5);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2.5) {
        &: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) {
        &: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(
	@borderWidth: 1px; 
	@borderStyle: solid; 
	@borderColor: @lignt-gray-color; 
	@borderRadius: 0) {
    .border(@borderWidth; @borderStyle; @borderColor; @borderRadius);
}

别的计划方案:

应用照片:适配性最好是,灵便行最差,不可以更改色调、长度

应用 viewportremjs 动态性更改 viewportscale 放缩,缺陷在于不可用于已有的新项目,比如:应用 vhvw 合理布局的

  <meta name="viewport" id="WebViewport" content="initial-scale=1,    maximum-scale=1, minimum-scale=1, user-scalable=no">

应用 css 渐变色 linear-gradientbox-shadow

上述 3 种计划方案均有致命缺点暂不强烈推荐应用

适配性

最终看1下适配性怎样,关键是伪元素、 transform:scalemin-device-pixel-ratio 这几个重要词的适配性

 

 

 

开源系统库的处理计划方案

vant 组件库

跳去 github 查询有关编码

应用 less 写的

.hairline-common() {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
}

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

  top: ⑸0%;
  right: ⑸0%;
  bottom: ⑸0%;
  left: ⑸0%;
  border: 0 solid @color;
  transform: scale(0.5);
}

也是选用第1种处理计划方案

ant-design-mobile 组件库

跳去 github 查询有关编码

.scale-hairline-common(@color, @top, @right, @bottom, @left) {
  content: '';
  position: absolute;
  background-color: @color;
  display: block;
  z-index: 1;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

.hairline(@direction, @color: @border-color-base) when (@direction = 'top') {
  border-top: 1PX solid @color;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-top: none;

      &::before {
        .scale-hairline-common(@color, 0, auto, auto, 0);
        width: 100%;
        height: 1PX;
        transform-origin: 50% 50%;
        transform: scaleY(0.5);

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

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

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-right: none;

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

        @media (min-resolution: 3dppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }
}
.hairline(@direction, @color: @border-color-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, auto, auto, 0, 0);
        width: 100%;
        height: 1PX;
        transform-origin: 50% 100%;
        transform: scaleY(0.5);
        @media (min-resolution: 3dppx) {
          transform: scaleY(0.33);
        }
      }
    }
  }
}

.hairline(@direction, @color: @border-color-base) when (@direction = 'left') {
  border-left: 1PX solid @color;

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

      &::before {
        .scale-hairline-common(@color, 0, auto, auto, 0);
        width: 1PX;
        height: 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 (@direction = 'all') {
  border: 1PX solid @color;
  border-radius: @radius;

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

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border: 1PX solid @color;
        border-radius: @radius * 2;
        transform-origin: 0 0;
        transform: scale(0.5);
        box-sizing: border-box;
        pointer-events: none;

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

这个值得科学研究下,比 vant 和 第1种处理计划方案有点不一样,关键在于解决了 DPR 为 2 和为 3 的两种状况,相比来讲更为健全。

这里 PX 大写,以便避免软件将 px 转成 rem 等企业

总结

根据该文,你大约掌握 1px 难题的前因后果了吧,也搞清楚了怎样处理有关难题,假如这票文章内容能处理你的疑惑或工作中中难题,何不点个赞个人收藏下。

因为技术性水平比较有限,文章内容中如有不正确地区,请在评价区指出,谢谢!

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。