必须加viewport标签，否则移动端按桌面宽度渲染；用HTML5语义标签构建结构，配合flex/grid布局、百分比/弹性单位、媒体查询实现响应式首页，无需框架或JS。
直接用 HTML5 语义标签 + viewport + 百分比/弹性单位 + 媒体查询，就能做出可用的响应式首页布局，不需要框架或 JS。
必须加的 <meta name="viewport"> 标签
没有它，移动端浏览器会按桌面宽度渲染，缩放后文字小得看不清，所有响应式努力都白费。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>里，且不能漏掉initial-scale=1.0 - 别写成
content="width=320"这类固定值，那会锁死视口宽度 - 部分安卓旧版浏览器对
user-scalable=no支持异常，非必要不加
flex 或 grid 替代 float 布局
float 做响应式首页容易塌陷、清浮动麻烦，现代写法应优先用 display: flex 或 display: grid。
- 顶部导航栏用
flex：一行内自动均分/对齐，@media里改flex-direction: column就能竖排 - 主内容区用
grid更稳：比如grid-template-columns: 1fr 3fr，左侧导航 1 份、右侧内容 3 份，缩放时比例不变 - 避免混用
float和flex，尤其在同一个容器里，IE11 以下兼容性差且行为难预测
图片和容器宽度别写死 px
写死像素会让元素在小屏上溢出，或在大屏上留大片空白。
立即学习“前端免费学习笔记（深入）”；
- 容器宽度优先用
%、max-width或vw：比如.header { width: 90%; max-width: 1200px; margin: 0 auto; } - 图片统一加
max-width: 100%; height: auto;，防止撑破父容器 - 字体大小慎用
px：推荐rem或em，配合根字体缩放更可控；小屏下可媒体查询里调小html { font-size: 14px; }
@media 断点别硬套 768px / 1024px
这些数字是历史遗留，实际要看内容何时“挤不下了”，而不是设备型号。
- 先写桌面样式（移动优先可选，但新手建议从大屏写起），再逐步缩小浏览器窗口，观察哪一刻文字换行、按钮重叠、图片裁切——那个宽度就是你的断点
- 常见合理断点：比如
@media (max-width: 920px)改两栏为单栏，@media (max-width: 480px)收缩导航文字或显示汉堡按钮 - 别堆砌太多断点：3–4 个足够覆盖主流场景；每个断点只改必要样式，避免重复覆盖
最易被忽略的是盒模型默认行为：box-sizing: border-box 应该全局加在 * 或 html 上，否则 padding 和 border 会额外增加元素宽度，导致百分比计算失准。
