移动端1px边框实现原理，移动端设置1px

前言：最近在写一个移动H5应用，遇到了一些值得记录的事情。现在我们来谈谈移动端的1px，从它的起源到它的实现。 1px不够准确，应该说1个物理像素。

读完下面的文章，您将了解以下问题：

问题中为什么有1px？ 实现1px的方法有哪些？ 开源项目中使用了哪些解决方案？ 您的项目中如何处理与1px相关的问题？基本概念的由来首先，需要理解两个概念。一是像素（可以缩写为px），二是设备像素比（DPR）。

像素：图像中由一系列数字表示的最小单位。单位是像素，不能再细分。设备像素比(DPR) : 设备像素比=设备像素/设备独立像素。我将复制代码并简要解释一些概念。

CSS Pixel（虚拟像素）：指CSS样式代码中使用的逻辑像素。在CSS规范中，长度单位分为两类：绝对单位和相对单位。 px 是相对于设备像素的单位。设备像素（物理像素）：指设备能够控制显示的最小物理单位，指显示屏上的每个点。从屏幕出厂之日起，设备屏幕上的像素就固定并与屏幕尺寸相关。与设备无关的像素（逻辑像素）：可以被认为是计算机坐标系中的一个点。该点代表程序可用的虚拟像素（例如， CSS 像素）。点越小，相关系统将其转换为物理像素的数量就越多。这意味着1pt 的逻辑像素将在DPR 为2 的设备上显示为2px 的物理像素。

参考数据各种iPhone屏幕设备参数

注意：这里的比例因子是DRP值。

设计对比数据

有些人可能对为什么设计草稿以750×1334 的分辨率显示感兴趣。这是因为设计稿显示的是物理像素。

CSS 像素是逻辑像素，并且必须为375x 667。编写代码时，将自定义宽度设置为375像素。

因此，此时设计稿上1px宽度所代表的实际CSS参数应该是0.5px，相当于1px物理像素。那么我们如何实现这个1px的物理像素呢？

实际上有两种方法可以做到这一点：在CSS 中使用transfrom:scaleY(0.5)，并将媒体查询配置为根据不同的DPR 进行缩放。

方案一原理：使用CSS伪元素：after + transfrom进行缩放

为什么要使用伪元素呢？伪元素：after或：before与当前元素无关，因此可以独立缩放，而不影响元素本身的缩放。

在大多数浏览器中，伪元素默认也可以与单引号一起使用，与伪类具有相同的格式，并且具有更好的单引号兼容性（ie）。

为了实现Cell 解决方案2（升级计划1）的原则，使用less 来封装通用代码（计划1）并同时添加媒体查询以针对不同的DPR 设备进行不同的扩展。

.border( @borderWidth: 1px; @borderStyle: Solid; @borderColor: @lignt-gray-color; @borderRadius: 0) { 位置： 前{ 内容： \’\’; 宽度： 98%; 3360 0; left: 0; webkit-transform-origin: 边界框； @media (-webkit-min-device-pixel-ratio: 2) { width: 200 % ; height: 200%; -webkit-transform: scale(.5) } @media (- webkit-min-设备像素比率：) { width: 250%; -webkit-transform: 缩放(.4); } } @media (-webkit-min-device-pixel-ratio: 2.75) { width: 275%;媒体(-webkit) – min-device-pixel-ratio: 3) { :before { width: 300%; transform: 比例(1/3) } .border-radius(@borderRadius);before { 边框宽度： @border width; style : @border color; }}.border-all(@borderWidth: 1px; @borderColor: @lignt-gray-color; @borderRadius:border(@borderWidth; @borderStyle; @borderColor; @borderRadius); }其他解决方案：使用图片. 兼容性最好，但行灵活性最差。使用视口和rem 时，比例会动态变化，不适合此项目。例如，使用vh 和vw 布局，使用css 渐变、线性渐变或box-shadow。以上三种方案都有致命缺陷，暂时不推荐。

兼容性最后我们看一下兼容性，主要是关键字pseudo-element、transform:scale、min-device-pixel-ratio。

开源库解决方案vant组件库去github查看相关代码

https://github.com/ant-design/ant-design-mobile/blob/master/components/style/mixins/hairline.less

用较少的量来写

.hairline-common() {position: 绝对； content: \’ \’; 指针事件： none;}.hairline(@color: @border-color) { .hairline-common(); left: -50%; border: 0 sell @transform:scale(0.5);} 也是第一个解决方案。

ant-design-mobile组件库去github查看相关代码

.scale-hairline-common(@color, @top, @bottom, @left) { content: 绝对值； z-index: @top; right;bottom: @bottom; left: @left;}.hairline(@direction, @color: @border -color-base) 当(@direction=\’top\’) { border-top: 1PX Solid @color ]) { @media (min-resolution: 2dppx) { border-top: none; 0, auto, auto, 0); 转换源： 50% 50%; 转换： 缩放Y(0.5); @media (最小分辨率： 3dppx) { 转换： 缩放Y(0.33);方向，@color: @border-color-base) 右\’) { border-right: 1PX 实心@color; html:not([数据比例]) { @media (最小分辨率： 2dppx) { border-right: none { .scale-hairline – common(@color, 0, 0) , auto, auto); 宽度： 100%; 背景： 100% 50%; 变换： 缩放X(0.33); ) when (@direction=\’bottom\’) { border-bottom: 1PX Solid @color; html:not([数据比例]) { @media (min-resolution: 2dppx) ) { border-bottom: none;after { .scale-hairline- common (@color, auto, auto, 0, 0); width: 1PX; 变换原点： 50% 100%; 媒体(最小分辨率： 3dppx) {transform:scaleY(0.33); } } } }}.hairline(@direction, @ color: @border-color-base) when (@direction=\’left\’) { border-left: 1PX Solid @ color; html:not([数据比例]) { @media (min-resolution: 2dppx) { border-left: none; hairline-common(@color, 0, auto, auto, 0); 变换原点： 100% 50%; 变换： 缩放X(0.5) { 变换： 缩放X(0.33) } } }}.hairline( @方向，基于@color:@radius: 0)when(@direction=\’all\’){border: 1PXsolid@color;border-radius:@radius;html:not([数据比例]){@media(最小分辨率： 2dppx){location:相对； 0; 宽度： 0 0; 变换3336 0 尺寸（0.5）; //@media（最小分辨率： 300） %;这与vant 或第一个解决方案有点不同，值得考虑，因为它更完整地处理DPR 为2 和3 的两种情况。相比下。

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

摘要：通过本文，我们希望您能够了解1px问题的详细情况，并了解如何解决相关问题。如果本文帮助您解决了与工作相关的疑问或问题，您可能会喜欢并保存本文。

由于本人技术水平有限，文章中如有错误，欢迎在评论区指出。谢谢。

请注意，我现在将概述我对H5 布局问题和移动设备上的一些陷阱的研究。

作者：小索俊少链接：https://juejin.im/post/5df3053ce51d45583d425ada 来源：掘金