怎么在Less中优雅处理移动端1px边框的高清屏CSS适配-css教程-PHP中文网

最稳妥方案是::after伪元素配合transform:scaley(0.5)，必须同时设置transform-origin、position:relative和pointer-events:none，否则在高dpr设备上会偏移、遮挡点击或模糊；其原理是通过缩放将1px伪元素在dpr=2下映射为1物理像素。

怎么在less中优雅处理移动端1px边框的高清屏css适配

直接用 transform: scaleY(0.5) + 伪元素是最稳妥的方案，但必须配齐 transform-origin、position: relative 和 pointer-events: none，否则在 iPhone 或高 DPR 安卓机上会偏移、遮挡点击或模糊。

为什么 `border: 1px` 在 iPhone 上看起来像 2px

因为 Retina 屏 devicePixelRatio 是 2，CSS 的 1px 被映射成 2 个物理像素。浏览器不支持 0.5px（仅 iOS Safari 8+ 有限支持，且需配合 -webkit-appearance: none），硬写会回退到 1px，起不到作用。

常见错误现象：

border: 0.5px solid #ccc 在大部分安卓机上无效，渲染仍为 1px
伪元素没设 content: ""，导致边框不出现
父元素没加 position: relative，::after 脱离文档流后定位错乱

`.hairline()` Mixin 的最小可用实现

Less 中封装一个可复用的边框 mixin，比手写每个 ::after 更可靠。关键是把缩放逻辑、定位和防交互干扰收口。

实操建议：

统一用 position: relative 触发包含块，避免父级 overflow: hidden 剪掉伪元素
transform-origin 必须按方向设：下边框用 0 100%，上边框用 0 0，左边框用 0 0，右边框用 100% 0
加 pointer-events: none，否则伪元素会拦截点击事件
为兼容旧 iOS，补 -webkit-transform

示例（仅底部边框）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.hairline-bottom(@color: #e5e5e5) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: @color;
    transform: scaleY(0.5);
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    pointer-events: none;
  }
}

如何适配 `dpr=3` 设备（如华为 Mate 系列、三星 S23）

硬编码 scaleY(0.5) 只对 dpr=2 有效。dpr=3 需要 scaleY(0.333)，但不能靠 Less 运行时读取 window.devicePixelRatio —— Less 是编译时预处理器，没有 JS 执行能力。

可行路径只有两条：

构建时注入变量：通过 Webpack/Vite 插件传入 @dpr: 3，mixin 内写 transform: scaleY(1 / @dpr)
用媒体查询兜底：@media (-webkit-min-device-pixel-ratio: 3) 单独覆盖 transform 值（注意：该查询在部分新 Android 浏览器中已失效，需搭配 (min-resolution: 3dppx)）

不推荐的做法：在 Less 里写 ~"calc(1px / @{dpr})" —— calc() 是运行时计算，无法被 Less 编译为具体数值，最终生成的仍是无效 CSS。