卡片结构必须用 article 而非 div，因其语义准确、利于无障碍访问与 seo；应配合 header/main/footer 划分区块，子内容用 section；移动端采用固定宽度 340px + overflow-x: auto + scroll-snap 实现稳定滚动；媒体区域用 aspect-ratio + object-fit 控制比例；交互反馈需用 :focus-visible 保障键盘导航合规。
卡片结构必须用 article 而不是 div
语义错误会导致屏幕阅读器误读、SEO 权重稀释，且现代 CSS（比如 display: flow-root 或某些 Grid 自动布局）对 article 的默认行为更可控。很多团队图省事全用 div，结果在无障碍测试里被反复打回。
-
article表示独立可分发的内容单元，天然匹配“一条动态”这个语义 - 避免嵌套多层
div包裹头像、正文、操作栏——每个区块用header、main、footer明确划分 - 如果卡片内含用户评论或转发子流，子项用
section，别再塞div
宽度固定 + 滚动容器是移动端最稳的方案
用 width: 340px（而非 % 或 vw）配 overflow-x: auto 的外层容器，比响应式栅格在动态流里更可靠。iOS Safari 对 flex-wrap 和 grid-auto-flow 的处理常有偏移，尤其当卡片内图片加载异步完成时。
- 外层容器设
display: flex+overflow-x: auto+scroll-snap-type: x mandatory - 每张卡片设
flex: 0 0 340px+scroll-snap-align: start - 禁用
-webkit-overflow-scrolling: touch（iOS 15+ 已废弃，反而触发卡顿） - 不要给卡片设
max-width: 100%——它会和父容器的340px冲突，导致缩放异常
aspect-ratio 控制媒体区域，但得配 object-fit 防拉伸
纯靠 width/height 做封面图容器，在不同尺寸上传图后极易变形。直接用 aspect-ratio: 16/9 简洁，但必须加 object-fit: cover，否则 Chrome 会默认拉伸图片填满。
- 图片容器用
img标签，不要用background-image——后者无法被爬虫索引，也绕过懒加载原生支持 - 为兼容旧版 Safari，加
@supports not (aspect-ratio: 16/9) { ... }回退到 padding-top 百分比 hack - 视频封面同理：给
video元素设aspect-ratio，并确保poster属性存在
交互反馈必须绑定到 :focus-visible 而非 :focus
键盘用户按 Tab 导航时，卡片焦点框不能只靠 :focus 触发——鼠标点击也会激活它，造成视觉干扰。很多团队漏掉这点，结果 WCAG 2.4.7 失败。
- 所有可交互元素（点赞按钮、分享图标）用
:focus-visible替代:focus - 卡片整体不设
tabindex，除非它承载完整操作逻辑（如“展开全文”） - 触摸设备上，用
@media (hover: none) and (pointer: coarse)关闭 hover 效果，避免误触残留
卡片布局真正的难点不在视觉排列，而在语义边界、输入方式切换、媒体加载时序这三者的耦合。改一个 div 成 article 可能要连带调整 aria-label 和 focus 管理逻辑，别只盯着 CSS Grid 的行数列数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
