前端面试CSS系列——移动端1PX像素问题

发布网友 发布时间：2024-10-24 16:49

我来回答

共1个回答

热心网友 时间：2024-10-29 13:58

设备像素与设备独立像素是描述电子设备分辨率的两种单位。设备像素（DP）是描述实物屏幕分辨率的最大像素，如屏幕分辨率为1920*1080时，指的是最大像素。设备独立像素（DIPs）在CSS、JavaScript、PS中描述字体大小、图片宽高等属性时使用，它是设备分辨率独立的像素单位。在浏览器中，通过`window.devicePixelRatio`获取设备的设备像素与CSS设备独立像素之比。

设备像素比（DPR）表示物理像素与设备独立像素的比值。PPI（Pixels Per Inch）像素密度描述屏幕每英寸像素数量，是衡量屏幕分辨率的重要指标。相同尺寸的屏幕，不同分辨率下的PPI不同，PPI值越大，画面越清晰。例如，4.3英寸的屏幕，分辨率480 * 800的屏幕像素密度为210，720 * 1280的屏幕像素密度为340。

视网膜显示屏具备高像素密度，使得人眼无法分辨像素点，提供更为清晰的视觉效果。当DPR大于1时，如iPhone 6设备像素为750 * 1334，设备独立像素为375 * 667，DPR计算为2，导致1PX边框在屏幕上被分配为2个设备像素。

解决1PX边框问题的方案有多种。方法一：使用`height:1px`的div，并通过媒体查询设置`transform: scaleY(0.5)`。方法二：利用伪类::after和::before，设置`border-bottom: 1px solid #000`和`-webkit-transform: scaleY(0.5)`。方法三：使用::after，设置`border:1px solid #000;width:200%;height: 200%`，之后设置`scale(0.5)`。这些方案通过调整单位或变换属性来解决物理像素与设备独立像素之间的不匹配问题。