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

日期：2021-01-19 类型：科技新闻我要分享

关键词：通道抠图，怎么在图片上编辑文字，创客贴作图神器，免费图片设计制作在线，背景透明图制作

近期在写挪动端 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);
}

别的计划方案：

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

应用 viewport 和 rem ， js 动态性更改 viewport 中 scale 放缩，缺陷在于不可用于已有的新项目，比如：应用 vh 和 vw 合理布局的

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

应用 css 渐变色 linear-gradient 或 box-shadow

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

适配性

最终看1下适配性怎样，关键是伪元素、 transform:scale 和 min-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 难题的前因后果了吧，也搞清楚了怎样处理有关难题，假如这票文章内容能处理你的疑惑或工作中中难题，何不点个赞个人收藏下。

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

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

上一篇：超經典的手机微信抽奖手机游戏，如何完全免费返回下一篇：没有了