您现在的位置是：网站首页> 编程资料编程资料

解决移动端1px边框最好的方法(推荐)解决移动端1px边框问题的几种方法(5种)详解移动端Html5页面中1px边框的几种解决方法reset.css引入以及1px边框问题的解决方法

2021-09-03 848人已围观

简介这篇文章主要介绍了解决移动端1px边框最好的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。

1px 边框问题的由来

苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。像这种像素比（像素比（即dpr）＝物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为二倍屏，目前市面上还有像素比更高的三倍屏、四倍屏。而 CSS 中 1px 指的是物理像素，因此，设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度，这就导致了界面边框变粗的视觉体验。

使用 transform 解决

通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放，这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景，而且修改灵活，唯一的缺陷是，对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下：

 .one-pixel-border { position: relative; box-sizing: border-box; } .one-pixel-border::before { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; border: 1px solid red; transform: translate(-50%, -50%) scale(0.5, 0.5); }

这样就可以得到 0.5px 的边框。

还可以结合媒体查询（@media）解决不同 dpr 值屏幕的边框问题，如下：

 @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { ... } @media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { ... }

注意：IOS 系统的 safari 浏览器不支持标准的 min-resolution，使用非标准的 min-device-pixel-ratio。

使用 pixel-border.css 解决

pixel-border.css是一个解决移动端 1px 边框的通用 CSS 工具。使用 transform 的解决方法，仅有几行的源码，使用起来非常方便，是目前发现最好的解决方法。

安装

npm安装：

 npm install pixel-border --save

yarn安装：

 yarn add pixel-border

浏览器安装，建议安装压缩后的版本：

使用

pixel-border 通过元素的 ::before 伪元素使用 transform 缩放为元素设置边框。因此，你可以使用原生的 CSS 边框属性为原素设置边框，只需要在元素上添加一个 pixel-border 或 pixel-border="true" 的属性，并设置元素的 border-style 值即可。如下会创建一个单像素边框：