用语义化html结构（section包裹article，header+p）和css grid实现三列响应式服务卡片，避免div滥用；图标用inline svg，标题用h3，描述用p；hover仅改border和shadow以减少重排；移动端需单独设置字体和行高，padding用rem，body设font-size:100%。
用纯 HTML + CSS 实现服务卡片布局，不依赖框架
直接写语义化 <section></section> 包裹一组 <article></article>，每张服务卡片用 <header></header> + <p></p> 组合，避免滥用 <div>。结构清晰了，后续加 hover 效果或响应式才不容易错位。
<p>常见错误是把图标、标题、描述全塞进一个 <code><div class="card"> 里，结果改字体大小时行高崩、换行错乱。用语义标签后，CSS 只需控制 <code>article 的 padding 和 header 的 margin-bottom，视觉节奏自然出来。
实操建议：
- 每个服务项用
<article></article>，别用<div> —— 屏幕阅读器和 SEO 都认这个 <li>图标用 inline SVG（不是图片），嵌在 <code><header></header>里，宽高设为1.5em，随文字缩放 - 标题用
<h3></h3>，不是<h2></h2>或<span></span>—— 层级不能跳，也不能降级 - 描述段落用
<p></p>，别用<div> + <code>text-align: justify—— justify 在小屏上断词极难看CSS 控制三列等宽响应式，避开 Flexbox 常见塌陷
用
display: grid比flex-wrap更稳：三列在桌面端，768px 下自动转两列，480px 下单列。关键是设置grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，而不是写死1fr 1fr 1fr—— 否则小屏会横向滚动。容易踩的坑：
- 没给
grid-gap设单位（比如只写gap: 1.5rem），某些旧版 Safari 会忽略 - 卡片内元素没设
min-width: 0，导致长英文或 URL 撑破容器（尤其在<p></p>里） - 用
align-items: start而不是默认的stretch，否则高度不一致的卡片底部对不齐
鼠标悬停时只动边框和阴影，不动尺寸
很多人加
transform: scale(1.02)或margin-top: -2px，结果触发重排（reflow），滚动卡顿，移动端点按还有延迟。真正轻量的做法是只改border-color和box-shadow，这两者只触发重绘（repaint）。示例关键代码：
article { border: 1px solid #e0e0e0; transition: border-color 0.2s, box-shadow 0.2s; } article:hover { border-color: #4a6fa5; box-shadow: 0 4px 12px rgba(74, 111, 165, 0.1); }注意：
transition必须写在常态规则里，不能只写在:hover中，否则鼠标移入有延迟，移出无动画。移动端字体和行高必须重设，不能靠继承
桌面端设了
font-size: 1rem、line-height: 1.6，但手机上 16px 文字太小，1.6 行高又太挤。必须在媒体查询里单独调：@media (max-width: 480px) { article h3 { font-size: 1.125rem; } }-
p的line-height改成1.7，小屏阅读更轻松 - 所有
padding用rem，别用px—— 否则用户放大字体时卡片会错位
最常被忽略的是：没给
body设font-size: 100%，导致部分安卓浏览器把基础字号解析成 13.33px 而非 16px，整个服务区文字偏小且行距发紧。 - 没给
