Less中如何通过Mixin和Media Queries实现适配移动端的1px边框CSS？

本文共计928个文字，预计阅读时间需要4分钟。

直接写+border: 1px solid+

Less 中如何用 @mixin 封装伪元素 + scaleY 方案

核心是把边框逻辑抽成可复用的 mixin，只控制「画在哪」「缩多少」「原点在哪」。不能对整个元素缩放，否则内容会被压扁；必须作用于 ::after 或 ::before，且显式设 content: "" 和 position: absolute。

• transform-origin 必须匹配边框位置：下边框用 bottom，上边框用 top，全边框用 left top
• 缩放比例按 1 / dpr 算：dpr=2 → scaleY(0.5)，dpr=3 → scaleY(0.333)
• 父容器需设 position: relative，否则伪元素定位失效
• 若要支持圆角，伪元素需设 box-sizing: border-box 并同步设置 border-radius

示例 mixin：

.hairline-bottom() { position: relative; &::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #ccc; transform-origin: bottom; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { &::after { transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { &::after { transform: scaleY(0.333); } } }

为什么不能用 @dpr: 2 动态拼媒体查询

Less 编译时无法将变量插入到 @media 条件中——@media (-webkit-min-device-pixel-ratio: @dpr) 会报错或被忽略。所有媒体查询必须硬编码档位，常见的是 2、2.5、3、3.5、4。

立即学习“前端免费学习笔记（深入）”；

• 只写 @media (-webkit-min-device-pixel-ratio: 2) 覆盖不了部分华为/小米机型（dpr=2.75 或 3.5）
• 加 (min-resolution: 192dpi) 是为了兼容非 WebKit 内核（如 Firefox Android）
• 不要依赖 JS 检测 window.devicePixelRatio 后加 class，首屏渲染会有闪动

全边框与单边框的 mixin 写法差异

单边（如下边框）只需控制一个方向缩放；全边框则需双轴缩放 + 宽高翻倍，否则边框会断开或偏移。

• 下边框：height: 1px + transform: scaleY(0.5)
• 全边框：width: 200%、height: 200%、border: 1px solid #ccc + transform: scale(0.5) + transform-origin: left top
• 全边框必须加 box-sizing: border-box，否则伪元素自身边框会撑出额外 1px
• 如果元素已有 ::before（如 clearfix），只能用 ::after，反之亦然

容易被忽略的兼容性细节

Android 4.4+ 和 iOS 8+ 基本都支持 transform: scaleY()，但某些定制 ROM（如旧版 MIUI）对 transform-origin 解析异常，导致边框位置偏移 1px。

• 测试时务必在真机上验证，模拟器的 DPR 行为常不准确
• 避免在 overflow: hidden 容器内使用该方案，缩放后的伪元素可能被裁剪
• 深色背景上用 box-shadow 替代时，颜色会轻微发虚，这是抗锯齿导致，不是代码问题
• SVG base64 方案虽精准，但每个边框都要单独编码，维护成本远高于 Less mixin

真正难的不是写出一个能跑的 1px，而是让同一套样式在 dpr=2/2.5/3/3.5/4 的几十种设备上都不偏、不虚、不闪——这需要你手动补全媒体查询档位，而不是指望一个变量自动覆盖全部。