给打印调的样式上线后,屏幕上正文变成单栏、按钮消失、背景全白,手机端更明显,回滚才恢复。乍看像缓存或者权限的锅,追下去往往不是。
@media print {
.no-print { display: none; }
body { background: #fff; }
}
追下去是这么回事:打印规则直接写在全局样式里,没有包在 @media print 中,所有设备都会命中。构建工具把多个文件合并后,顺序变化又放大了影响。
「print 媒体查询作用域」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
具体做法是,把打印专用规则整段收进 @media print;用开发者工具切到 print 模拟 确认屏幕样式不受影响;上线前对比首页和列表页的截图 看有没有布局位移。
验收就看一点,屏幕上布局和改动前一致,打印预览里才应用隐藏与单栏。
