结论是语义化HTML结构+Flex布局+viewport meta标签可覆盖绝大多数设备；因浏览器和屏幕阅读器依赖标签名识别内容角色，而非class名，如<header><nav><main>具有明确语义与SEO价值，而<div class="header">仅为无意义盒子，且结构错误会导致JS失效、SEO降权、无障碍访问失败。

直接说结论：用语义化 HTML 结构 + Flex 布局 + 一个 viewport meta 标签，就能跑通绝大多数设备；别先写 CSS，更别碰 Bootstrap——结构错，再好看的样式也救不回来。

为什么

不能替换成

浏览器和屏幕阅读器靠标签名判断内容角色，不是靠 class 名。你写 <div class="header">，它就真只是个无意义的盒子；而 <header> 会被搜索引擎标记为“页面头部区域”，<nav> 被识别为导航流，<main> 是唯一正文容器（必须且只能出现一次）。

常见错误现象：

• 用 <div id="nav"> 包导航，结果移动端 JS 切换菜单时找不到父级上下文，document.querySelector("#nav ul") 返回 null
• 在 <main> 外又塞一个 <section> 放文章列表，导致大纲解析混乱，语音朗读跳过标题
• 页脚写成 <div class="footer">，SEO 工具直接忽略版权信息，不计入页面权重

Flex 布局怎么用才不翻车

导航栏、主内容分栏、页脚对齐，全交给 display: flex，别用 float 或 inline-block。Flex 的优势不是“能居中”，而是“断点切换时不用重写整套逻辑”。

立即学习“前端免费学习笔记（深入）”；

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

实操建议：

• 导航水平居中：nav { display: flex; justify-content: center; } —— 比 text-align: center 更稳定，不依赖子元素 display: inline-block
• 左右分栏（如文章列表 + 侧边栏）：main { display: flex; } section { flex: 3; } aside { flex: 1; } —— 不需要清除浮动，也不怕 margin 合并
• 页脚粘底：body { display: flex; flex-direction: column; min-height: 100vh; } + main { flex: 1; }，footer 自然沉底

响应式断点只设两个就够用

别一上来就写 @media (max-width: 320px)、@media (max-width: 480px)、@media (max-width: 768px)……实际开发中，768px 和 1024px 覆盖 95% 场景。手机竖屏（≤768px）切单列、横屏或小平板（769–1024px）微调间距、桌面（≥1025px）铺开两栏或三栏。

关键提醒：

• 没加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，所有 @media 都无效——手机浏览器会强制按 980px 渲染，缩放后文字糊成一片
• 图片别写 width: 100%; height: auto; 就完事，得加 max-width: 100%;，否则在窄屏里撑破容器
• 字体大小慎用 px，优先用 rem 或 em，配合 html { font-size: 100%; } 统一基准

最容易被忽略的是：语义结构一旦定型，后续加 JS 动效、换主题、接 CMS，都只是往里填内容；但如果你一开始用 div 堆出“看起来像导航”的结构，后面每加一个功能，都要先花半小时修 DOM 路径。