viewport标签必须放在最顶部且内容为width=device-width、initial-scale=1.0，否则图片响应式失效；常见错误包括动态插入、重复声明、写成width=375或添加user-scalable=no。
viewport 标签没写对，图片再怎么设都白搭
手机上图片撑破屏幕、页面能左右拖动、文字糊成一团——八成是 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没生效。它必须放在 最顶部，不能动态插入，不能重复写，更不能写成 width=375 或加 user-scalable=no。
常见失效场景：
- Vue/React SSR 渲染漏掉这行，真机加载时浏览器已按 980px 宽度解析完 DOM
- 写了
maximum-scale=1.0，iOS Safari 双击放大直接失灵，读屏用户也被锁死 - 在
里补写，浏览器早跳过解析阶段了
验证方式：Chrome DevTools 切手机模式 → 右键“查看网页源代码”，确认这行在 开头附近。
img { max-width: 100%; height: auto; } 为什么经常不生效
这行 CSS 只解决“不溢出容器”，但前提是父容器有明确宽度参照。浏览器计算 max-width: 100% 时，会逐级向上找第一个有明确宽度的祖先元素。
典型失效原因：
- 父容器只写了
display: flex却没设width或max-width，图片“找不到 100% 是多少” - Flex 容器里的
<img>默认带min-width: auto，死守原始尺寸，max-width: 100%被无视 -
<img src="x.jpg" style="max-width:90%" style="max-width:90%">这类内联属性会覆盖height: auto，高度被锁死 - 某些框架（如 Bootstrap）全局设了
img { max-width: 100% }，你又加了style="width: 500px"，导致冲突
修复办法：给图片加 min-width: 0，同时确保其父 Flex/Grid 子项也设 min-width: 0 —— 不是加在图片上就完事，得双管齐下。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
srcset + sizes 才是真正省流量的关键
max-width: 100% 只控制显示，不减少下载体积。小屏加载 2MB 桌面图再缩到 375px，像素全下了，带宽白耗，首屏卡顿。
正确做法是让浏览器自己选图：
-
srcset提供多尺寸图源，用w描述符（如image-480w.jpg 480w），别混用480w和2x，否则整条srcset被忽略 -
sizes是字符串，不是 CSS，不支持calc()，但支持媒体查询语法：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" -
sizes必须和真实 CSS 布局断点一致，比如布局用768px，就别写成767px；如果图片在栅格中占 1/3 宽，sizes就该是"(max-width: 768px) 100vw, 33.33vw"，不是硬写100vw
示例：
@@##@@
什么情况下必须用
当不同屏幕需要完全不同的构图或格式时，<picture></picture> 不是可选项，是刚需。
适用场景：
- 手机裁切人脸、桌面展示全景 Banner：
<source media="(max-width: 480px)" srcset="face-crop.jpg"></source> - 强制用 WebP 或 AVIF 并提供降级：
<source type="image/webp" srcset="img.webp"></source>后必须跟<img src="default.jpg" srcset="img-480w.jpg 480w, img-800w.jpg 800w, img-1200w.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="响应式图片"> -
<source></source>的media属性断点必须和真实 CSS 布局断点一致 -
<picture></picture>必须包裹在<img src="img.jpg" alt="">外层，顺序错（比如<img>在前）就完全失效
注意：object-fit 在父容器没设明确宽高时根本不生效；旧版 Edge 解析 sizes 时，媒体查询里有空格（如 (max-width: 768px)）会导致整条属性失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
