Bootstrap如何适配Retina及4K高清屏幕显示？-Bootstrap教程-PHP中文网

bootstrap 不处理设备像素比（dpr），需手动通过 srcset/sizes 提供多倍图、用 media query + background-size 适配背景图，或采用 svg/图标字体规避模糊问题。

bootstrap如何适配retina及4k高清屏幕显示？

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 显式声明密度：
若需配合宽度断点（如小屏用 100px 宽图、大屏用 200px 宽图），改用 sizes + 宽度描述符，例如：sizes="(max-width: 768px) 100px, 200px"
注意：<picture></picture> 更灵活，但多数场景 srcset + 1x/2x/3x 已足够，且兼容性更好（IE 不支持，但 Bootstrap 4+ 本就不支持 IE）

`background-image` 必须配 `background-size` + 媒体查询

用 CSS 设置背景图时，background-size: contain/cover 无法解决 DPR 问题——它只按容器逻辑尺寸缩放，不感知设备像素。结果就是 @2x 图被当成 1x 渲染，实际显示只有半清晰度。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

显式设 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></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"></use> 方式引用，而非 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 基准是否随系统缩放动态变化，才是决定文字和控件是否“看起来小一截”的关键点。