必须加viewport meta属性、srcset和sizes、语义化标签及img的width/height属性；它们分别确保视口正确、图片响应式加载、结构清晰稳定、避免布局抖动，是响应式基础。
HTML 属性本身不直接“实现”响应式布局，但几个关键属性能显著改善响应式体验的可靠性与语义基础——漏掉它们，CSS 再灵活也容易翻车。
必须加的 viewport meta 属性
没有它，移动端浏览器会以桌面视口宽度（通常 980px 左右）渲染页面，导致内容被缩放、文字过小、点击区域难操作。这不是 CSS 能补救的问题。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是硬性起点，必须放在中 - 别写成
width=1200或省略initial-scale=1.0，否则 iOS Safari 可能触发双击缩放或字体重排 - 如果项目需禁用用户缩放，可加
user-scalable=no，但会损害可访问性，慎用
srcset 和 sizes 控制图片响应式加载
CSS 的 max-width: 100% 只解决显示溢出，不解决带宽浪费。真正节省流量、提升首屏速度，得靠 HTML 层的资源选择。
-
srcset提供多分辨率图像源，如srcset="logo-1x.png 1x, logo-2x.png 2x" -
sizes告诉浏览器“这张图在不同断点下大概占多宽”，比如sizes="(max-width: 768px) 100vw, 300px" - 只写
src不写srcset，浏览器就只能下载最大图；只写srcset不写sizes，浏览器可能默认按 100vw 加载，仍浪费
语义化标签替代 div 类名，让媒体查询更稳
用 <header></header>、<main></main>、<aside></aside> 等不是为了“好看”，而是让 CSS 选择器和媒体查询逻辑更聚焦、更不易误伤。
- 比如
main > article比.content .post更可靠：后者一旦父容器 class 名变化或嵌套加深就失效 - 在移动端优先的媒体查询中，
@media (min-width: 768px) { aside { display: block; } }比基于 class 的写法更直白、更少歧义 - 屏幕阅读器和搜索引擎依赖这些标签理解结构，间接影响响应式内容的可读顺序和焦点流
width 和 height 属性对内联替换元素仍有实际作用
虽然现代响应式推荐用 CSS 控制尺寸，但对 <img>、<iframe></iframe> 等替换元素，HTML 的 width/height 属性仍影响渲染行为。
- 设置
<img style="max-width:90%" style="max-width:90%">会触发浏览器预留空间，避免加载时布局抖动（CLS） - 配合 CSS
width: 100%; height: auto;使用，既保原始宽高比，又防重排 - 注意：不要用它们做响应式缩放主体——那该交给 CSS 的
max-width和aspect-ratio
真正容易被忽略的，是 viewport 和 srcset 这类 HTML 层属性和 CSS 的协同节奏：它们不炫技，但一旦缺位或配错，后续所有 Flex/Grid 布局、媒体查询断点、甚至 JavaScript 的尺寸判断都会建立在错误前提上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
