Bootstrap 不处理设备像素比（DPR），需手动通过 srcset/sizes 提供多倍图、用 media query + background-size 适配背景图，或采用 SVG/图标字体规避模糊问题。
Bootstrap 本身不处理设备像素比（DPR）或物理分辨率适配，img、background-image、图标字体、SVG 等资源在 Retina/4K 屏上模糊，不是 Bootstrap 的 bug，而是没做 DPR 感知的资源供给和 CSS 控制。
图片用 srcset + sizes 替代单 src
Bootstrap 的 .img-fluid 只管响应式缩放，不管像素密度。直接写 <img src="icon.png"> 在 2x 屏上会拉伸模糊。
- 必须提供多倍图：比如
icon.png（1x）、icon@2x.png（2x，尺寸为 200×200px）、icon@3x.png（3x，300×300px） - 用
srcset显式声明密度：<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x"> - 若需配合宽度断点（如小屏用 100px 宽图、大屏用 200px 宽图），改用
sizes+ 宽度描述符，例如：sizes="(max-width: 768px) 100px, 200px" - 注意：
<picture>更灵活，但多数场景srcset+1x/2x/3x已足够，且兼容性更好（IE 不支持，但 Bootstrap 4+ 本就不支持 IE）
background-image 必须配 background-size + 媒体查询
用 CSS 设置背景图时，background-size: contain/cover 无法解决 DPR 问题——它只按容器逻辑尺寸缩放，不感知设备像素。结果就是 @2x 图被当成 1x 渲染，实际显示只有半清晰度。
- 显式设
background-size为逻辑尺寸：若 @2x 图是 200×200px，对应逻辑尺寸是 100×100px，则写background-size: 100px 100px - 用
min-resolution: 2dppx区分 DPR（现代浏览器）：@media (min-resolution: 2dppx) { .icon-home { background-image: url('icon@2x.png'); background-size: 100px 100px; } } - 老 Safari（-webkit-min-device-pixel-ratio: 2，二者可并存
- 避免用
background-size: 200px 200px配 @2x 图——那会放大两倍，更糊
Font Awesome 图标要禁用位图 fallback，优先用 SVG
FA v4 默认用图标字体（@font-face），在高 DPR 下边缘发虚；v5+ 默认用 SVG + JS（@fortawesome/react-fontawesome 或 CDN 的 SVG with JS 方式），本质是内联 <svg>，天然矢量高清。
- 如果还在用 FA v4 字体方案，必须替换：删掉
<link rel="stylesheet">引入的字体 CSS，改用官方 SVG CDN 或 NPM 包 - 若必须保留字体方案（如 legacy 项目），可加
text-rendering: optimizeLegibility和-webkit-font-smoothing: antialiased稍微改善，但无法根治 - 自定义图标字体（如 Icomoon）同理：导出时勾选「SVG only」，用
<use xlink:href="#icon-home">方式引用，而非content: "\e901"
栅格与字体单位本身已适配，但别乱用固定 px
Bootstrap 的 rem 基础、流体栅格（.col-*）、viewport 元标签，天然支持高 DPR 设备——只要你不手动覆盖成死值 px。
- 禁止写
.card { width: 300px }—— 这在 2x 屏上实际占 600 物理像素，但逻辑宽度仍为 300px，易导致溢出或错位 - 所有尺寸应基于 Bootstrap 工具类（
mw-100、w-50、fs-5）或相对单位（rem、%、em） - 字体大小用
fs-*类或font-size: 1.125rem，不要写18px；否则在系统级缩放（如 Windows 125% 缩放）下会失比例 -
container的断点宽度（如md: 720px）是 CSS 像素（CSS px），不是物理像素，所以无需调整——它本就是为逻辑视口设计的
真正容易被忽略的是：高 DPR 屏幕往往伴随高系统缩放（如 macOS 默认 200% 缩放、Windows 125%/150%），而很多开发者只测了 DPR，忘了测缩放。这时 viewport 的 initial-scale=1 和 rem 基准是否随系统缩放动态变化，才是决定文字和控件是否“看起来小一截”的关键点。
