直接用 html+css+少量 js 写气象卡更稳定，因数据简单、避免框架体积与状态延迟，100kb 内加载且兼容性强；需语义化结构、grid/flex 布局、inline svg 图标、带超时和错误回退的 fetch、字段名校验及带时间戳的 localstorage 缓存。
为什么直接用 <div> 套样式写气象卡比用框架更稳<p>因为气象指数数据源通常简单（温度、湿度、AQI、风速几个字段），强行套 React 或 Vue 反而增加打包体积、首屏延迟，还容易因状态更新不及时导致卡片显示旧数据。纯 HTML + CSS + 少量 JS 能做到 100KB 以内加载完，且可直接嵌入任何现有页面（比如 WordPress 文章页、静态博客）。</p>
<p>实操建议：</p>
<ul><li>结构用语义化标签：<code><section class="weather-card"></section> 包裹，内部用 <dl></dl> 列出指标（<dt></dt> 为“体感温度”，<dd></dd> 为数值），比一堆 <div> 更利于爬虫和屏幕阅读器<li>避免用 <code>float 布局——现在一律用 display: grid 或 flex，例如给指标列表设 display: grid; grid-template-columns: 1fr 1fr; 实现两列均分
<svg></svg> 到 HTML 里，填上 fill="#666"，这样缩放不失真，也方便用 CSS 控制颜色从免费 API 拿气象数据时，fetch() 必须加 .catch() 和超时控制
像 https://api.weatherapi.com/v1/current.json?key=xxx&q=beijing 这类公开接口，常因跨域、限流、网络抖动失败。不处理错误，卡片会空白或卡在 loading 状态。
实操建议：
- 用
AbortController设 8 秒超时：const controller = new AbortController(); setTimeout(() => controller.abort(), 8000);，再传进fetch(url, { signal: controller.signal }) -
.catch()里不要只打console.error，要 fallback 到本地默认值，比如：document.querySelector(".temp").textContent = "25°"; - API 返回字段名要核对清楚：WeatherAPI 用
current.temp_c，OpenWeather 是main.temp，硬编码字段名会导致解析失败
localStorage 缓存气象数据能省请求，但得判断时间戳是否过期
气象数据每小时更新一次就够了，没必要每次打开页面都调 API。但若缓存永远不清理，用户看到的就是昨天的 AQI。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
- 存数据时一起存时间戳：
localStorage.setItem("weatherData", JSON.stringify({ data: res, timestamp: Date.now() })); - 读取时检查：
if (data.timestamp - 别用
localStorage存整个响应对象——只存你需要的字段，比如{ temp: 24.3, humidity: 65, condition: "Partly cloudy" }，减少序列化开销
移动端适配不是加个 <meta name="viewport"> 就完事
很多自学写的气象卡在手机上文字挤成一团、图标错位，问题常出在未重置默认缩放行为或未处理视口宽度变化。
实操建议：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">中user-scalable=no要慎用——它会让视力障碍用户无法放大文字，合规做法是去掉这一项 - 用
clamp(1rem, 2.5vw, 1.25rem)控制字体大小，比媒体查询更轻量；气象卡主标题可用font-size: clamp(1.5rem, 4vw, 2rem); - 图标尺寸用
em或rem，别用固定px，否则 iOS Safari 缩放时图标不会随文本等比变大
气象卡真正的难点不在写 HTML，而在数据失效时的降级策略和小屏下的可读性权衡——比如湿度 95% 时，进度条颜色该红到什么程度才既醒目又不刺眼，这种细节没法靠模板解决。
