transform: scale(0.5) 能让1px边框在视网膜屏下显示为1物理像素，因缩放发生在绘制后，不改变布局且精准对齐设备像素；需配合 transform-origin 和伪元素隔离单边边框，并动态适配 devicePixelRatio。
为什么 transform: scale(0.5) 能让 1px 边框变细
视网膜屏（dpr > 1）下，CSS 的 1px 实际被渲染为 2px 或更多物理像素，导致边框“发粗”。transform: scale(0.5) 并不是改边框宽度，而是把整个元素（含边框）等比缩小——此时边框的 CSS 宽度仍是 1px，但缩放后在设备像素上只占 1 个物理像素。
关键点在于：缩放发生在绘制之后，不影响布局流，且能精准对齐设备像素。
- 必须配合
transform-origin: 0 0（或具体定位），否则缩放中心偏移会导致位置错乱 - 仅对单边生效时（比如只想要下边框），需用伪元素隔离，避免整块内容被缩放
-
scale()值需严格匹配设备像素比，常见取值：scale(0.5)（dpr=2）、scale(0.333)（dpr=3）
如何用 window.devicePixelRatio 动态设置缩放值
硬写 scale(0.5) 只适用于 dpr=2 的设备。真实场景中需 JS 检测并注入对应样式，否则在 iPhone 14 Pro（dpr=3）或部分安卓机（dpr=2.75）上会失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在页面初始化时读取
window.devicePixelRatio，四舍五入取整（如 2.75 → 3） - 通过
document.documentElement.style.setProperty()注入 CSS 变量，例如--dpr: 2 - CSS 中用
transform: scale(calc(1 / var(--dpr)))，避免重复写死多个媒体查询 - 注意：iOS Safari 对 calc 在 transform 中的支持较晚（iOS 15.4+），旧版本需回退到 JS 插入 class
伪元素 + scale() 实现单边 1px 边框的正确写法
直接对容器用 scale() 会让文字、内边距全部缩小，不可接受。正确做法是把边框抽离到 ::after 或 ::before，单独缩放。
典型错误写法：.border-bottom { border-bottom: 1px solid #ccc; transform: scale(0.5); } → 整体内容变形。
推荐结构：
.border-bottom {
position: relative;
}
.border-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ccc;
transform: scaleY(0.5);
transform-origin: bottom;
}
- 用
height: 1px+background-color替代border，更可控 - 仅用
scaleY(0.5)，避免横向压缩影响宽度计算 -
transform-origin: bottom确保缩放后仍贴底，不偏移 - 若容器有
padding-bottom，伪元素需额外bottom: -1px补偿（缩放前的 1px 高度）
哪些情况不能用 transform 缩放解决
这个方案不是银弹。以下场景会出问题：
- 元素本身已有
transform（比如动画、3D 旋转），叠加缩放会导致矩阵冲突，渲染异常 - 父容器设置了
overflow: hidden，缩放后伪元素可能被裁剪（尤其scaleY(0.5)向下延伸时） - 需要边框响应 hover 或 active 状态变化时，
transform缩放后的点击热区会变小，需额外调大hit-area或用pointer-events: none配合父层捕获 - 打印样式表（
@media print）中，缩放无效且可能破坏布局，需单独重置
真正要稳定兼容所有边界，还是得结合 device-pixel-ratio 媒体查询 + border-image 或 box-shadow 备选方案。缩放只是最轻量的切入点，别指望它包打天下。
