白也blog - 2022年4月26日
type: channel
link: https://www.baiyeovo.cn/index.php/2022/04/26/
description: 总有人间一两风,填我十万八千梦
items: 移动端1px的问题

移动端1px的问题
type: item
date: 2022-04-26T01:06:00+08:00
description: 问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。产生原因：首先先要了解一个概念：DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 逻辑像素的比值。目前主流的屏幕 DPR=2 或者 3CSS中设置的px是逻辑像素,这就造成1px变成物理像素的2px或者3px，比如2 倍屏，设备的物理像素要实现 1 像素，所以 CSS 逻辑像素只能是 0.5px。通过CSS :before 选择器或CSS :after 选择器设置height:1px，同时缩放0.5倍实现。/* 底边框 */ .b-border { position: relative; } .b-border:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #d9d9d9; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } /* 四条边 */ .setBorderAll { position: relative; &:after { content: ' '; position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: left top; box-sizing: border-box; border: 1px solid #e5e5e5; border-radius: 4px; } }