Bootstrap布局本身不会模糊，模糊只源于图片、边框、字体等资源未适配DPR或CSS控制不当；Mac视网膜屏下所有发虚均因1x资源被拉伸或像素未对齐，非Bootstrap缺陷，无需换框架。
Bootstrap 布局本身不会模糊，模糊只出现在具体资源（图片、图标、边框、文字）或 CSS 渲染控制不当的环节。Mac 视网膜屏（DPR=2）下所有“发虚”现象，本质都是 1x 资源被拉伸渲染、或像素对齐失控导致的，不是 Bootstrap 的错，也无需换框架。
img 和 background-image 在 Retina 下模糊怎么修
Bootstrap 的 .img-fluid 只设 max-width: 100% 和 height: auto，不管设备像素比。直接写 <img src="icon.png"> 在 MacBook Pro 上必然拉伸模糊。
- 图片必须提供多倍源：比如
icon.png（1x）、icon@2x.png（200×200px）、icon@3x.png（300×300px） - 用
srcset显式声明密度：<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x"> - 背景图不能靠
background-size: cover混过去——它只按逻辑尺寸缩放。得用媒体查询切图：@media (min-resolution: 2dppx) { .hero { background-image: url('hero@2x.jpg'); background-size: 100px 100px; } } - SVG 是首选：
<img src="logo.svg" class="img-fluid">或background-image: url(cover.svg)，无缩放失真
按钮和边框在 Retina 下边缘发虚怎么修
Bootstrap 的 border: 1px solid #ddd 在 DPR=2 屏上实际占 2 物理像素，但浏览器没做亚像素对齐，结果就是灰边、左右不对称。
- 别改
border-width为0.5px——CSS 不支持，浏览器会四舍五入回 1px - 用伪元素模拟真实 1px 视觉边框：
.btn-retina::after画一条height: 2px的线，再transform: scaleY(0.5)压扁 - 必须加
transform-origin: top center（上边框）或bottom center（下边框），否则缩放后偏移 - 先清掉原生边框：
border: none，否则伪元素和 border 叠加出 2px 厚度 - 注意布局干扰：父容器用了
float、flex的align-items: center、或按钮自身有transform: scale()，都会让伪元素错位 1px
字体和图标在 macOS 上看起来发虚怎么查
硬加 -webkit-font-smoothing: antialiased 反而会让中文字体更糊——它关掉了子像素抗锯齿，在 macOS 上表现为低对比、毛边。问题九成出在加载链或 fallback 链上。
- 检查字体是否异步加载：用
@import或未设font-display: swap的@font-face，会导致 FOUT 期间用系统位图字体撑开，重绘后模糊 - 看
font-family顺序：中文必须排前面，比如"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif；混入"Helvetica Neue"这类无中文字形的英文字体，fallback 就是模糊位图 - 确认
font-weight匹配：写了font-weight: 400却加载了 Regular 字重，而设计稿用的是 Medium，字重不一致就会软 - Font Awesome 图标优先用 SVG 方案（CDN 的 SVG with JS 或 React 组件），别用 v4 的图标字体——后者在高 DPR 下边缘必虚
navbar backdrop-filter 模糊效果不生效或文字变毛
加了 backdrop-filter: blur(10px) 却看不到模糊？大概率是 .navbar 自带 background-color: #fff 盖住了背后内容；文字发虚？是因为滤镜作用到了整个 DOM 树，包括 .nav-link。
- 必须清掉默认背景：
background-color: transparent或极低 alpha 的rgba(255,255,255,0.08)，不能留bg-light类 -
background-image也要清：background-image: none !important，否则 Bootstrap 5 的浅色渐变残留 - Safari 必须双写：
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) - 文字必须剥离模糊：
.navbar-glass .nav-link { backdrop-filter: none; }，none是唯一能切断继承的值 - 移动端
.navbar-collapse展开时透底？单独设背景：@media (max-width: 991.98px) { .navbar-glass .navbar-collapse { background-color: rgba(255,255,255,0.92); } }
最常被忽略的一点：所有涉及高清适配的容器，高度、行高、padding 等必须用整数值（如 height: 40px，而非 height: 40.5px），否则 sub-pixel 渲染会连锁放大模糊感——尤其当系统开启了「更大字体」或页面缩放非 100% 时。
