px在高DPI或缩放屏下错位，因其是参考像素而非物理像素；应优先用rem/em/%/vw/vh，并动态设置html font-size，配合box-sizing: border-box和统一line-height确保响应与对齐。
为什么 px 在高 DPI 或缩放屏幕下会错位
固定像素值（px）在物理像素密度不同的设备上表现不一致：Windows 缩放设为 125% 时，一个 CSS px 可能对应 1.25 个设备像素；Mac Retina 屏下，1px 常被渲染为 2 物理像素。浏览器按逻辑像素计算布局，但字体、边框、间距若全用 px，就容易出现文字模糊、容器溢出、对齐偏移等“错位”现象。
这不是 bug，是 CSS px 本就不等于物理像素——它只是“参考像素”，而设备缩放、DPR（devicePixelRatio）会改变其实际渲染尺寸。
- 避免给
font-size、padding、margin、width等属性硬写px - 优先用
rem（相对于根元素字号）、em（相对于父元素字号）、%（相对于父容器）、vw/vh（视口百分比） - 确保
的font-size是可响应的，而非固定16px
如何用 rem 实现真正响应的字号与间距
rem 的核心在于动态控制 的 font-size。不能只设 html { font-size: 16px; }，否则和 px 没本质区别。
html {
/* 基于视口宽度动态调整根字号，实现流体缩放 */
font-size: clamp(14px, 2.5vw, 18px);
}
/ 或使用 JS 更精细控制（如适配缩放率） /
@media (min-resolution: 1.25dppx) {
html { font-size: 20px; }
}
@media (min-resolution: 2dppx) {
html { font-size: 32px; }
}
这样之后，所有用 rem 的属性都会随屏幕变化自动缩放：
立即学习“前端免费学习笔记（深入）”；
-
font-size: 1.25rem→ 在html为 16px 时是 20px，在 20px 时变成 25px -
padding: 1rem和line-height: 1.5rem会同步缩放，保持视觉比例 - 慎用
em嵌套场景（如多层font-size叠加），易失控；rem更可控
vw 和 % 该选哪个？关键看容器关系
% 是相对于**父容器**的宽/高计算，vw 是相对于**整个视口宽度**（1vw = 1% of viewport width）。错位常源于父容器本身没撑满或被压缩，这时用 % 反而放大问题。
- 做全屏轮播图、导航栏高度：用
height: 80vh，不依赖父级高度 - 做卡片内边距或按钮宽度：若父容器宽度已响应（如
max-width: 90%），用padding: 2%可能比padding: 1rem更贴合内容流 - 避免混用：
width: 50%+padding: 20px容易导致 overflow；统一换成width: calc(50% - 1rem)或全用rem/vw
别忽略 box-sizing 和字体度量差异
即使单位改了，如果 box-sizing 还是默认的 content-box，加上不同字体的 line-height、ascent、descent 渲染差异，仍可能造成视觉错位——尤其在表单控件、行内元素对齐时。
* {
box-sizing: border-box;
}
input, button, select, textarea {
/ 统一基线对齐 /
vertical-align: middle;
line-height: 1.5;
font-size: 1rem;
}
- 全局设
box-sizing: border-box，让width包含padding和border，避免计算偏差 - 中英文混排时，
font-family切换可能导致line-height实际占用高度突变；显式设置line-height: 1.5（无单位）比line-height: 24px更安全 - 用
flex或grid替代float+margin对齐，减少因像素舍入导致的累积偏移
实际错位往往不是单一原因。最常被忽略的是：把单位改成 rem 后，忘了重设 html 的 font-size，或者在媒体查询里漏写了高 DPI 设备的适配规则。
