1px边框在iphone上显粗是因retina屏dpr=2，css 1px映射为2物理像素；less用伪元素+scale(0.5)可解决，但需设transform-origin:0 0、box-sizing:border-box，并通过多条件媒体查询适配背景图，canvas模糊则必须js动态适配dpr，less仅能兜底样式。
高分屏下CSS的1px变粗、背景图模糊、Canvas锯齿，不是代码写错了，是设备像素比（DPR）没对齐导致的渲染失真。Less能帮你把适配逻辑收口，但必须理解哪些地方该编译时处理、哪些必须运行时干预。
为什么1px边框在iPhone上看起来像2px
因为Retina屏DPR=2，浏览器把1个CSS像素映射到2×2个物理像素，border: 1px实际画了2px宽。伪元素+transform: scale(0.5)是主流解法，但容易踩坑：
-
transform-origin必须设为0 0（左上角），否则缩放后边框位置偏移 - 外层容器要加
box-sizing: border-box，否则缩放影响padding计算 - 慎用于子元素有
position: absolute的场景——top/left会按缩放后的坐标系计算 - Less里不能硬写
@dpr: 2，真实DPR有1/2/3/4，得靠构建流程传参或媒体查询多档输出
如何用Less mixin自动切换@2x背景图
关键不是“换图”，而是保持CSS像素尺寸不变。只写@media (min-resolution: 2dppx)会漏掉iOS Safari和旧版Firefox：
- 必须同时覆盖三套查询：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) -
background-size必须显式写成原始设计尺寸（如20px 20px），否则@2x图会拉伸失真 - Less字符串插值要用
~"@{url}@2x.png"，漏掉~会导致路径变成字面量 - SVG图标不用
@2x，但mixin仍要兼容PNG/JPG后缀，避免调用时出错
Canvas模糊为什么Less解决不了
Canvas的模糊根源在JS层：CSS设置的宽高和canvas.width/height缓冲区不匹配。Less纯CSS无法读取window.devicePixelRatio，所以：
- 不能靠Less mixin生成
width/height属性——这是运行时行为 - 必须用JS获取
getBoundingClientRect()和devicePixelRatio动态重设缓冲区 - Less只能配合做样式兜底，比如给
canvas加image-rendering: pixelated防插值，但治标不治本
最易被忽略的是：Less适配全是编译时静态处理，而DPR是运行时变量。真正复杂的场景（比如动态主题+DPR切换+Canvas重绘）必须JS介入，Less只负责把重复的媒体查询和缩放逻辑封装干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
