从设计稿到 Fiddle：尺寸换算指南
把 @1x / @2x / @3x 设计稿的标注换算成 CSS 逻辑像素，按逻辑宽度选择预览机型，并正确使用切图素材、避开常见还原坑。
为什么要换算
CSS 使用逻辑像素，而 Figma、蓝湖、Sketch 等工具导出的设计稿标注的是物理像素，两者之间差一个「倍率」。照着设计稿写页面时，只需要在动手前做一次换算，之后写下的每个数值都是逻辑像素，与预览机型上的坐标系一致。
第一步：识别设计稿倍率
移动端设计稿通常按 @1x、@2x 或 @3x 导出，国内交付以 @2x 最常见。判断方法看 iPhone 竖屏稿的画布宽度即可：375 宽是 @1x，750 宽是 @2x，1125 宽是 @3x。倍率只影响标注数值的大小，不改变字号、间距之间的相对关系；Figma 的画布设置与蓝湖等项目设置里也会直接标注倍率。
| 设计稿倍率 | 画布宽度（iPhone 竖屏稿） | 写进 CSS 的值 |
|---|---|---|
| @1x | 375 | 标注值直接使用 |
| @2x | 750 | 标注值 ÷ 2 |
| @3x | 1125 | 标注值 ÷ 3 |
第二步：换算并写进 CSS
规则只有一条：从设计稿上抄下的所有标注值 ÷ 倍率，再写进 CSS——字号、间距、圆角、边框一视同仁。例如 @2x 稿标注「字号 28、内边距 24、圆角 16」，写出来就是 font-size: 14px、padding: 12px、border-radius: 8px。横屏稿与安卓稿同理：先用「画布物理宽度 ÷ 倍率」得出逻辑宽度，再按逻辑宽度对档预览机型。
第三步：按逻辑宽度选预览机型
预览设备清单标注的就是逻辑视口，与换算后的 CSS 像素同一坐标系。按稿子的逻辑宽度对档：375 的稿选 iPhone SE（第三代），390 选 iPhone 17e，402 选 iPhone 18 Pro 或 iPhone 17 Pro，桌面整页稿用桌面模式或响应式布局。机型选错档最常见的症状是断点拆错位置、栅格对不齐——先核对逻辑宽度，再回头调代码。
切图与图片素材
切图按「高倍原图 + CSS 逻辑宽高」使用：直接插入 @2x / @3x 的切图，width / height 写换算后的逻辑值，浏览器会按屏幕密度自动渲染清晰。在 fiddle 里写演示场景不必准备 srcset 多倍图，统一用最高倍那张即可；图片发虚多半是把 @1x 图放大到了两倍以上。占位图也可以用 piximg-* 自定义指令快速生成，见相关指南。
常见坑
三个高频问题：页面整体放大一倍——把 @2x 标注值直接抄进了 CSS，全部 ÷2 即可；断点位置与设计稿对不上——预览机型的逻辑宽度与稿子不同档，按上一节对档；图标位图发虚——切图用了 @1x，换成高倍图。另外「1px 边框在手机上显得粗」属于目标屏幕像素密度的话题，与设计稿倍率无关，可以用 0.5px 或伪元素边框方案处理。