基于rem（含62.5%技巧）的新响应式项目，除媒体查询外是否需用像素？

Great questions—let’s break these down one by one, since pixel units still hold their ground even in modern responsive development workflows.

Absolutely. Pixels aren’t obsolete—they’re just one tool in your CSS toolbox, and there are plenty of scenarios where they’re the best choice:

• Fixed physical size requirements: When you need an element to match a specific physical dimension (like print styles for invoices, or a captcha image that needs to stay a precise size), px is reliable. Unlike relative units, px doesn’t scale with root font sizes or viewport changes, so you get consistent physical output.
• High-precision UI details: Tiny visual tweaks like shadow blur radii (box-shadow: 0 2px 4px rgba(0,0,0,0.1)), thin border widths, or subtle letter spacing often work better with px. Using relative units here can lead to inconsistent visual weight across different screen sizes, which breaks the intended design.
• Legacy browser compatibility: While this is less common now, if you need to support older browsers (like IE8 and below) that don’t recognize rem or vw/vh, px is your safe fallback. It’s universally supported across all browsers, new and old.
• Fine-grained animation control: For micro-interactions like small button hovers (transform: translateY(3px)) or loading spinner rotations, px ensures the animation’s scale stays consistent. Relative units could cause the animation to grow/shrink unexpectedly if the root font size changes.

Even in projects using the 62.5% trick (where 1rem = 10px for easy calculation), px still has valid use cases beyond media query breakpoints:

• Minimum touch/click targets: WCAG guidelines recommend a minimum 44px×44px clickable area for interactive elements. Using px here ensures the target stays large enough for accessibility, even if users scale their system font sizes. If you used rem, a user’s increased root font could make the target bigger than needed, but more importantly, a decreased font size might shrink it below the accessibility threshold.
• Overriding third-party component styles: Most UI libraries (like Element UI, Bootstrap) use px for certain internal styles (e.g., input border widths, dropdown padding). Using px to override these ensures you match the library’s existing precision, avoiding weird layout shifts from rem-to-px conversion mismatches.
• Scrollbar customization: When styling custom scrollbars (::-webkit-scrollbar { width: 8px; }), px is the go-to unit. Scrollbar size is tied to the browser window’s context, not the page’s font scale, so fixed px values keep scrollbars consistent across devices.
• SVG element precision: For SVG icons or graphics, using px for stroke widths, coordinate positions, or viewbox dimensions ensures the vector art renders exactly as intended. While SVG supports relative units, px avoids unexpected scaling when the SVG is embedded in different contexts.
• Form element style resets: Browsers apply default styles to form elements (like input borders or textarea padding) using px. Resetting these with px ensures cross-browser consistency, as you’re directly overriding the browser’s native pixel-based defaults.

内容的提问来源于stack exchange，提问作者mhpreiman