设计要求一像素分隔线,实际显示有粗有细,缩放后更明显。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
.line { height: 1px; transform: scaleY(0.5); transform-origin: 0 0; }
@media (-webkit-min-device-pixel-ratio: 2) { .line { transform: scaleY(0.5); } }
物理像素与逻辑像素比例不同,直接写一像素会被放大。这一点先确认清楚,后面就不用反复试。
「一像素边框」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。
改完隔一天再看一次,当场正常不代表能稳住。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
权限不要一口气开到最大,先加到够用再往上试,范围小才好收。
具体做法是,使用缩放变换绘制细线;或改用背景渐变;按设备比例动态计算。
改完照着核一遍,不同设备上分隔线视觉粗细一致。