推荐用语义化html结构（figure+dl）搭配flex/grid布局，配合rem字体和单断点响应式，确保图标清晰、对齐稳定、可访问性强且易维护。
用纯 HTML + CSS 实现可读性强的天气卡片结构
新手最容易卡在“怎么让图标、温度、文字对齐又不乱”，核心是别一上来就写样式，先用语义化标签搭骨架。天气卡片本质是「一组状态信息」，<figure></figure> 包裹图标和说明最合理，<dl></dl>（定义列表）比一堆 <div> 更易维护。<p>推荐结构如下：</p>
<pre class="brush:php;toolbar:false;"><article class="weather-card"><figure>
@@##@@
<figcaption>今日天气</figcaption></figure><dl>
<dt>温度</dt>
<dd>26°C</dd>
<dt>湿度</dt>
<dd>65%</dd>
<dt>风速</dt>
<dd>3 m/s</dd>
</dl></article></pre>
<p>注意：<code>alt 属性必须写，否则屏幕阅读器无法识别天气；width/height 写死能避免图片加载时布局跳动。
CSS 布局用 Flex 而不是 float 或 position
新手常抄老教程用 float: left 或 position: absolute，结果改一个数字全乱套。Flex 是目前最稳的方案，且兼容性已覆盖所有现代浏览器（包括 iOS Safari 12.2+）。
关键写法：
.weather-card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
border-radius: 8px;
background: #f8f9fa;
}
<p>.weather-card figure {
margin: 0;
text-align: center;
}</p><p>.weather-card dl {
display: grid;
grid-template-columns: 6em 1fr;
gap: 0.5rem;
margin: 0;
}</p>
说明：
-
gap比margin更可靠，不会触发外边距合并 -
grid-template-columns: 6em 1fr让“温度”“湿度”这些标签宽度固定，值自动撑满，比用table更轻量 - 别给
<img src="sun.svg" alt="晴天" style="max-width:90%" style="max-width:90%">设max-width: 100%——天气图标需要精确尺寸，缩放会模糊
响应式断点只设一个：768px 就够了
新手总想做「手机/平板/桌面」三套布局，其实多数天气卡片在移动端竖排即可，真正要调整的只有中屏（iPad 类设备）。
加这段就够了：
@media (min-width: 768px) {
.weather-card {
flex-direction: row;
align-items: center;
}
.weather-card dl {
grid-template-columns: auto 1fr;
}
}
效果：小屏竖排（图标在上），768px 起横排（图标左、文字右）。不需要媒体查询嵌套，也不用 JavaScript 切换 class。
字体大小用 rem，但根字号别乱动
很多新手看到「响应式字体」就去改 html { font-size: 62.5% }，结果全局文字变小、第三方组件错位。直接用浏览器默认 16px 基准最稳妥。
推荐写法：
.weather-card {
font-size: 1rem; /* = 16px */
}
<p>.weather-card dd {
font-size: 1.25rem; /<em> = 20px </em>/
}</p><p>@media (min-width: 768px) {
.weather-card dd {
font-size: 1.5rem; /<em> = 24px，仅横排时放大 </em>/
}
}</p>
注意：rem 是相对于根元素，不是父元素——所以别在 .weather-card 里设 font-size 再指望子元素继承，该用 em 的地方才用 em。
真正麻烦的是图标资源和单位一致性：温度用 °C 还是 ℃、湿度写 65% 还是 0.65、风速单位用 m/s 还是 km/h——这些不是代码问题，是数据源约定，得跟 API 返回字段对齐，不然前端硬转容易出错。
