Bootstrap 不处理设备像素比（DPR），需通过 srcset 提供多倍图（如 1x/2x/3x）、用 image-set() 或媒体查询切换 background-image、优先采用 SVG，否则单图在 Retina/4K 屏必模糊。
Bootstrap 本身不处理设备像素比（DPR），所以直接用 img-fluid 或 background-image 写单张图，在 Retina/4K 屏上必然模糊——这不是你代码写错了，是资源供给和 CSS 控制没跟上 DPR。
img 标签在高 DPR 下模糊怎么修
核心是别只给一张图，浏览器得知道“这张图是给 1x 还是 2x 屏用的”。img-fluid 只管缩放逻辑尺寸，不管物理像素密度。
- 必须准备多倍图：比如
logo.png（100×100px，1x）、logo@2x.png（200×200px，2x）、logo@3x.png（300×300px，3x） - 用
srcset显式声明密度：<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x" alt="Bootstrap网页怎么适配高分辨率Retina屏幕" > - 优先选
.svg：直接<img src="logo.svg" class="img-fluid" alt="Bootstrap网页怎么适配高分辨率Retina屏幕" >，无缩放失真，体积小，适配所有 DPR - 别依赖
transform: scale()补救——放大再缩小仍走插值，清晰度已不可逆丢失
background-image 模糊必须用 media query 切换
CSS 的 background-size: cover 不感知 DPR，只按容器逻辑尺寸缩放。一张 100×100px 的背景图在 2x 屏上会被拉伸到 200×200 物理像素，结果就是糊。
本地 Ollama 文生图工具。使用 x/z-image-turbo 模型生成图片，分辨率 1024x1024，每张图约耗时 90 秒。当用户说"生成图片"、"文生图"、"画一张图"、或提交中文提示词生成图像时使用。
下载
本地 Ollama 文生图工具。使用 x/z-image-turbo 模型生成图片，分辨率 1024x1024，每张图约耗时 90 秒。当用户说"生成图片"、"文生图"、"画一张图"、或提交中文提示词生成图像时使用。
- 最稳妥方式是用
image-set()（Chrome/Firefox/Safari 支持）：background-image: image-set(url('bg.jpg') 1x, url('bg@2x.jpg') 2x); - 兼容性要求高时，改用媒体查询：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .hero { background-image: url('bg@2x.jpg'); } } - 如果用了
@2x图，background-size必须设为逻辑尺寸：比如bg@2x.jpg是 200×200px，对应逻辑尺寸是 100×100px，就写background-size: 100px 100px - 千万别写
background-size: 200px 200px配 @2x 图——那会强制再放大一倍，更糊
Bootstrap 自带图标（如 navbar-toggler）怎么高清化
Bootstrap 5 默认的 hamburger 图标是 base64 编码的 PNG（20×20px），在 Retina 屏上固定分辨率，必然发虚。
- 直接覆盖
.navbar-toggler-icon的background-image，用内联 SVG data URL：.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } - 确保父元素有
color值（如color: #333），SVG 中用stroke='currentColor'才能继承 - 容器宽高不能为 0：检查是否漏了
.navbar-toggler的width和height，或父级display导致塌陷 - 别试图用
font-size缩放 PNG 图标——位图缩放即失真
真正容易被忽略的点是：所有适配动作都建立在「提供正确尺寸的资源」基础上。没有 @2x 图，再复杂的 media query 也白搭；没设对 background-size 逻辑值，image-set 也会渲染错。DPR 适配不是加个类名就能解决的事，它是一整套资源 + 标记 + 样式协同的结果。
