用object-fit: cover或contain可保持宽高比，但必须配合容器明确宽高（如aspect-ratio: 4/3）和overflow: hidden，否则因替换元素无尺寸基准而失效。
宽屏下图片拉伸变形怎么 fix
直接用 <img width="100%"> 在 2560px 宽屏上会压扁产品图，本质是没控制宽高比。必须用容器 + object-fit 组合：
<div class="product-img-wrap"> <img src="phone.jpg" alt="手机" class="product-img"> </div>对应 CSS：
.product-img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.product-img { width: 100%; height: 100%; object-fit: cover; }注意：IE 不支持 aspect-ratio，需降级用 padding-top 百分比 hack（比如 padding-top: 75% 配合绝对定位子元素）。
横向滚动卡顿或跳变的常见原因
长页横向铺开产品时，用 scroll-snap-type: x mandatory 很容易在 Chrome 或 Safari 上出现滑动不跟手、松手后多滚一屏。关键点有三个：
- 父容器必须设
overflow-x: scroll且禁止overflow-y: hidden（否则 snap 失效） - 每个产品区块要加
flex-shrink: 0，否则 flex 布局会压缩宽度破坏 snap 对齐 - 避免在滚动容器内嵌套 transform 动画，尤其是
scale()，会触发合成层切换导致掉帧
.gallery { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; }
.item { flex-shrink: 0; scroll-snap-align: start; width: 100vw; }
字体在 4K 屏上发虚怎么调
不是所有“高清屏”都默认启用 subpixel 渲染，尤其 macOS + Chrome 组合下 font-smooth 已废弃，真正起效的是：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
font-optical-sizing: auto（支持 Safari 15.4+、Chrome 110+）让可变字体自动适配像素密度 - 对非可变字体，加
-webkit-font-smoothing: antialiased（macOS）和-moz-osx-font-smoothing: grayscale（Firefox） - 避免用
rem单位设小于 16px 的字号——4K 屏下 1rem=16px 实际只占 1/2 物理像素，文字必然糊
18px，再用 clamp() 做响应：font-size: clamp(18px, 4vw, 24px);
加载大量产品图导致滚动卡死
一页放 20 张 3MB 的 WebP 图，首屏就卡。别信“懒加载能解决一切”，关键在三步：
- 用
loading="lazy"是基础，但必须配合decoding="async"防止解码阻塞主线程 - 给每张图加
fetchpriority="high"（仅首屏图），其余设low - 服务端必须返回明确的
width和height属性，否则浏览器无法预留空间，造成 layout shift
<img src="p1.webp" width="1200" height="800" loading="lazy" decoding="async" fetchpriority="high">如果后端无法输出尺寸，至少用 JS 提前注入
style="aspect-ratio: 3/2"。
宽屏长页真正的麻烦不在布局，而在设备像素比、滚动引擎兼容性、图像解码时机这三者的交叉影响——调完一个参数，得连着测 Windows+Chrome、macOS+Safari、iPadOS+WebKit 三个环境才敢上线。 
