img-fluid无法解决高分屏模糊，需用srcset提供多倍图、背景图换svg或媒体查询切换、手动添加大屏断点、淘汰图标字体改用svg图标。
img-fluid解决不了高分屏模糊，必须换图源或加srcset
img-fluid只设max-width: 100%和height: auto，完全不感知设备像素比（DPR）。在2x屏上，一张100×100px的logo.png会被渲染成200×200物理像素，但图像数据只有100×100，结果就是拉伸发虚。
常见错误：<img src="icon.png" class="img-fluid">在MacBook Pro上边缘模糊；用DevTools检查发现元素宽100px，但device pixel width是200px——缺高倍图源。
- 提供多倍图：保留
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, icon@3x.png 3x"> - 若需配合宽度断点（如小屏用100px宽图、大屏用200px），改用
sizes：sizes="(max-width: 768px) 100px, 200px" - 更省事方案：直接用
logo.svg，img-fluid照常可用，矢量无损
background-image在Retina/4K下糊，不能只改CSS，得换资源或加媒体查询
写.hero { background: url(hero.jpg) center/cover no-repeat; }在4K屏上照样糊——background-size: cover只管逻辑缩放，不管DPR。浏览器把@2x图当1x加载，实际用了半清晰度。
关键不是加!important，而是控制“什么分辨率下加载哪张图”：
- 优先用SVG背景：
background-image: url(hero.svg)，天然适配任意DPR - 必须用位图时，提供
hero@2x.jpg并用媒体查询切换：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .hero { background-image: url(hero@2x.jpg); } } - 切忌写
background-size: 200px 200px配@2x图——那会再放大两倍，更糊；应按逻辑尺寸写：background-size: 100px 100px - 注意高度塌陷：若背景只显示一条线，大概率是父容器没高度，加
min-height: 100vh或height: 100vh
Bootstrap 3默认不支持xxl断点，4K屏下col-xl-*无效，得手动补媒体查询
Bootstrap 3根本没有xl断点，更别说xxl。你在4K屏上写col-lg-4，它就永远按≥992px渲染，不会自动为1920px+屏幕优化列宽或字号，结果是内容被压扁、留白消失、文字密不透风。
不能指望升级类名，得在CSS里补上真正起作用的规则：
- 给大屏单独加断点：
@media (min-width: 1920px) { .col-4k-3 { flex: 0 0 25%; max-width: 25%; } }（注意BS3用float，这里用flex需额外处理） - 更稳妥的做法是覆盖现有类：
@media (min-width: 1920px) { .col-lg-4 { width: 25%; } .col-lg-6 { width: 33.333333%; } } - 字号别只靠
h1～h6，加自定义类：@media (min-width: 1920px) { .h1-4k { font-size: 3.5rem; } } - 慎用
container-fluid：它只是移除了max-width，但body默认有margin，得手动清：html, body { margin: 0; height: 100%; }
字体图标在高分屏发虚，FA v4字体方案必须淘汰
Font Awesome v4用图标字体（@font-face），本质是位图轮廓，在高DPR下抗锯齿失效，边缘毛刺明显。这不是CSS能修好的问题，是渲染机制缺陷。
你加text-rendering: optimizeLegibility或-webkit-font-smoothing: antialiased只能稍缓，无法根治。
- 立即停用FA v4的CDN字体引入，删掉
<link rel="stylesheet">那一行 - 改用FA官方SVG方案：CDN加载
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/svg-with-js.min.css，再用<i class="fa-solid fa-home"></i> - 若项目强依赖v4且无法升级，至少禁用位图fallback：在CSS中加
.fa { font-family: 'Font Awesome 5 Free'; }并确保woff2字体文件存在 - SVG方案本质是内联
<svg></svg>，天然矢量高清，且可直接用CSS控制颜色、大小、旋转
srcset、换SVG、手动加媒体查询、淘汰图标字体，这四件事做完，模糊感基本消失。细节上最容易漏的是background-size写错逻辑尺寸，以及container-fluid没清掉body的默认边距。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
