纯html+css可构建真正可用的响应式新闻模板，关键在于：必写viewport元标签、用grid布局图文流、每张img设真实宽高与loading="lazy"、严格使用article/section等语义化标签并配有效alt文本。
直接用纯 HTML + 原生 CSS 就能搭出真正可用的响应式新闻模板，不需要框架、不引入 JS、不依赖构建工具——关键在结构选对标签、视口配准、图片控死宽高、断点设得准。
必须写的 <meta name="viewport"> 不能漏
这是整个响应式的起点，漏掉它，移动端永远显示缩略版或文字挤成一团。只写这一行就够了：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误是写成 initial-scale=0.5 或加了 user-scalable=no——前者让页面默认缩得太小，后者禁用双指缩放，直接违反无障碍规范。国内很多编辑后台自动生成的 HTML 会偷偷塞这类限制，要手动删掉。
用 display: grid 搭图文流，别碰 float
新闻列表本质是“等宽卡片流”，float 在多列下极易塌陷、换行错位，尤其遇到 RTL 文字或图片加载延迟时。Grid 天然支持自动折行和等高对齐：
.news-grid {<br> display: grid;<br> grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))));<br> gap: 1rem;<br>}
要点说明：
-
minmax(300px, 1fr)表示每列最小 300px，超出后均分剩余空间，适配平板和桌面 -
auto-fill而非auto-fit：确保空列也占位，避免内容突然左移（影响阅读连贯性） - 每张
<img>必须带真实width和height属性，否则触发 CLS（布局偏移），Core Web Vitals 直接不合格
<img> 的 loading="lazy" 是硬性要求
新闻页首屏外的图片若不懒加载，Chrome 会阻塞主线程，导致白屏时间拉长。但只加 loading="lazy" 不够，还必须满足：
-
width和height值必须与实际图片尺寸一致，不能填300和200瞎蒙 - 如果后端图尺寸不可控，改用 CSS
aspect-ratio: 16 / 9替代 HTML 宽高（注意 Safari 15.4+ 才支持） - 绝对不要用 JS 懒加载库——原生
loading="lazy"在 Chrome/Firefox/Safari 中已全量稳定，多加 JS 反而拖慢首屏
语义化标签不是摆设，<article></article> 和 <section></section> 有明确分工
新闻首页不是一堆 <div> 堆出来的。结构错乱会导致 VoiceOver 朗读顺序混乱、SEO 权重分散、打印样式失效：
<ul>
<li>每条新闻用 <code><article></article> 包裹，它是独立可分发的内容单元
<section></section>，内部必须含 <h2></h2> 作标题<header></header> 只用于页面顶部（刊名/期号/日期），别用来包每条新闻的标题<h1></h1> 只能有一个，通常是报头名称，不是某条新闻标题最易被忽略的是：所有 <img> 必须配 alt，且不能留空或写“新闻配图”。如果是信息图，alt 要简述数据结论；如果是人物肖像，写清姓名与身份。这点在政府、高校类新闻站上线审查时会被重点卡。
