为什么修改 CSS 后页面没有变化，仍显示 Bootstrap 默认字号？

先把 Bootstrap 放在前面，自定义样式放在后面，再检查媒体查询是否匹配当前视口。从给出的 HTML 看，问题出在样式表的引入顺序：style.css 放在 Bootstrap 前面，后面的 Bootstrap body 规则覆盖了你设置的字号。

为什么始终显示 14px？

当前的引入顺序是：

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Bootstrap 3.3.7 的 body 规则设置了 font-size: 14px。你的规则也使用 body 选择器，优先级相同，而且两者都是普通声明，所以排在后面的 Bootstrap 声明生效。

媒体查询决定其中的规则是否参与层叠，不会提高选择器优先级：

@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

即使视口宽度达到 1200px，这里的选择器也仍是 body，字号声明会被后面同优先级的声明覆盖。因此，在样式表顶部再加一条 body 规则，或把 min-width 换成 max-width，都解决不了这个覆盖问题。

这里的顺序是 HTML 中的排列顺序，与文件下载完成的先后无关。

先调整样式表顺序

将 <head> 中的相关部分改为：

<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- 框架样式在前 -->
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>

<!-- 自定义样式在后 -->
<link rel="stylesheet" type="text/css" href="style.css" />

保存后重新加载页面。当前这些 body 规则不需要添加 !important。

CSS 字号和媒体查询也不依赖 jQuery 或 Bootstrap JavaScript，调整脚本顺序无法解决这里的样式覆盖问题。

确认断点的实际含义

min-width 表示视口宽度达到指定值时，规则开始生效，多个条件可以同时匹配。

例如，视口宽度达到 1200px 时，原代码中的 320px、480px、768px、992px 和 1200px 条件都会匹配。这些字号规则使用相同的选择器，所以最后的 20px 覆盖前面的值。

只看字号，原来的设置可以简化为：

/* 默认字号，仅用于复现原设置 */
body {
  font-size: 4px;
}

@media (min-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (min-width: 992px) {
  body {
    font-size: 24px;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

将这段代码放在后引入的 style.css 中，保留其他需要的样式。如果没有其他规则覆盖，结果应为：

原来的 320px 和 480px 规则都设置了 4px，因此这个字号示例省略了它们，其中的其他样式仍可保留。4px 太小，不适合作为实际简历正文的字号。

断点判断的是浏览器视口宽度，单位是 CSS 像素，与 .container 的宽度、显示器物理分辨率不同。打开侧边开发者工具或调整浏览器缩放，都可能影响断点是否匹配。

如果仍然没有变化，按这个顺序检查

1. 查看 body 的最终字号和来源

打开浏览器开发者工具，选中 <body>，在“样式”面板中搜索 font-size，再查看“计算样式”。

检查以下几项：

• style.css 中的规则是否出现。
• font-size 声明是否被划掉。
• 最终生效的声明来自哪个文件、哪一行。

自定义声明出现但被划掉，说明浏览器已经读取了规则，需要查看是哪条声明覆盖了它。完全找不到对应规则时，再检查文件加载、媒体查询条件和 CSS 语法。

也可以在控制台执行：

getComputedStyle(document.body).fontSize

它会返回当前 body 的计算字号，例如 "20px"，比只凭页面观感判断更准确。

2. 确认浏览器读取的是正在编辑的文件

href="style.css" 通常相对于当前 HTML 文档的 URL 解析。如果 HTML 和 CSS 不在同一目录，需要填写正确路径，例如：

<link rel="stylesheet" href="css/style.css" />

在开发者工具的“网络”或“源代码”面板中找到 style.css，检查路径，以及浏览器收到的内容是否包含刚保存的修改。通过 HTTP 访问时，还要检查是否有 404 等加载错误。

这样可以排除文件未保存、修改了另一个同名文件、预览页面指向其他目录等情况。

3. 直接检查媒体查询是否匹配

在控制台执行：

window.matchMedia("(min-width: 1200px)").matches

返回 true 表示条件匹配，应继续检查声明是否被覆盖；返回 false 表示当前视口尚未达到该断点，其中的声明不会生效。

4. 检查缓存和语法

如果浏览器读取到的 CSS 仍是旧内容，可以在开发者工具打开时禁用缓存，再重新加载页面。

如果文件内容已经更新，但某条规则没有出现，检查附近是否有未闭合的注释、缺失的花括号或无效声明。仅凭刷新后页面没有变化，还不能认定是缓存问题。

body 变大了，为什么标题没变？

font-size 可以继承，但元素自身设置的字号优先于继承值。Bootstrap 为 h1、h5 等标题设置了独立字号，因此修改 body 不一定会改变这些标题。

如果确认 body 的字号已经变成 20px，标题却仍保持原来的大小，可以在 style.css 中单独设置：

h1 {
  font-size: 2em;
  text-align: center;
}

h5 {
  font-size: 1em;
}

这里的 em 相对于元素父级的计算字号。也可以根据简历版式直接使用明确的 px 值。

先修正样式表顺序，再通过开发者工具确认声明的来源。只有发现其他更高优先级的规则或 !important 声明时，才需要进一步调整选择器或对应规则。

备注：内容仅供参考。