background-size: cover在移动端裁剪严重，根本原因是设备宽高比（如9:16）与图片比例（如16:9）差异大，导致等比缩放填满时必然裁边；应优先用contain验证需求，必须用cover时需配合background-position锚定主体、设置aspect-ratio或明确宽高，并用image-set()适配高清屏。
background-size: cover 在移动端裁剪严重怎么办
不是 cover 写错了，而是它必须等比缩放填满容器——当手机竖屏宽高比（比如 9:16）和图片原始比例（比如 16:9）差异大时，必然切掉大量内容。人脸、Logo 被砍掉是典型症状。
- 先试
background-size: contain：整图可见但可能留白，确认“填满”是否真比“看清主体”更重要 - 必须用
cover？搭配background-position锚定关键区域，例如人物偏上就写background-position: center top - 别依赖图片默认尺寸，给容器加
aspect-ratio: 16/9或明确的width/height，让cover有稳定参照 - iOS Safari（尤其 ≤ iOS 12）对
vh或内容撑高容器下的cover渲染不稳定，加min-height: 100vh+transform: translateZ(0)触发硬件加速可缓解
高清屏下背景图模糊，明明放了 @2x 图
浏览器不会自动识别 bg@2x.jpg，只靠文件名没用。模糊根源是像素密度不匹配：1x 屏用 2x 图，浏览器会双线性插值缩放，结果变糊。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 优先用
image-set()：background-image: image-set("bg.jpg" 1x, "bg@2x.jpg" 2x);现代浏览器支持好，语义清晰 - 降级用媒体查询：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .el { background-image: url("bg@2x.jpg"); } } - @2x 图必须是物理尺寸翻倍（如原图 1200×600 → @2x 必须是 2400×1200），PS “放大”或“重采样”只会更糊
用 CSS 缩放图片导致失真，image-rendering 真的有用吗
有用，但别指望它解决所有问题。这个属性是告诉浏览器用哪种算法重采样，crisp-edges 强制最近邻插值，适合图标、线条图；对照片类图片反而显锯齿。
- 生效需配合具体值：
image-rendering: -webkit-optimize-contrast;（Chrome/Safari）、-ms-interpolation-mode: nearest-neighbor;（旧 Edge） - 兼容性差：Firefox 对
crisp-edges支持有限，Safari 15.4+ 才完全支持标准语法 - 真正保险的做法仍是准备多套分辨率资源，或直接换 SVG（仅限图形类）
背景模糊后边缘出现白色光晕
这是 filter: blur() 应用在绝对定位背景图上时，边缘像素被透明区域拉伸导致的合成伪影，不是 bug，是渲染原理决定的。
- 别用
filter模糊背景图本身，改用backdrop-filter作用于前景遮罩层（如::before） - 确保
backdrop-filter元素有定位（position: absolute或relative），且其父容器有真实背景内容（不能全透明） - 若必须用
filter，加overflow: hidden和足够内边距（padding）避免边缘外溢
transform: scale()、backdrop-filter、甚至 background-size 在某些安卓 WebView 或低端 iOS 设备上仍可能触发软件渲染，导致性能抖动或效果异常——得靠真机测试，不能只看模拟器。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
