标签不参与响应式行为，仅统一相对url解析起点；必须置于内且唯一，href须为绝对url或根相对路径（如/myapp/），仅影响html属性中的相对路径，不影响css/js内部路径。
<base> 标签在自适应页面中几乎不参与“响应式行为”本身——它不随屏幕尺寸变化，也不影响媒体查询或 flex/grid 布局。它的作用纯粹是路径解析层面的：**统一相对 URL 的解析起点**。是否要用、怎么用，取决于部署结构，而非设备类型。
为什么自适应页面常误配 <base>
开发者看到“页面要适配手机/平板/桌面”，下意识认为 HTML 结构也要“动态调整”，于是尝试用 JS 动态写 <base href="/mobile/"> 或根据 window.innerWidth 切换 base。这是典型误解：
-
<base>是 HTML 解析阶段一次性生效的静态指令，浏览器不会在 resize 或 orientationchange 时重新计算 - 自适应页面的资源（CSS、JS、图片）通常复用同一套，路径逻辑一致，无需按设备区分 base
- 真要区分设备资源（如高清图），应靠
<picture></picture>+srcset或 CSSbackground-image媒体查询，和<base>无关
<base href="/"> 在根部署时最安全
绝大多数自适应站点（如博客、文档站、营销页）部署在域名根路径（https://example.com/），此时：
- 直接省略
<base>最稳妥：所有./css/app.css、images/logo.svg都按当前页面 URL 解析，无歧义 - 若硬要加，只写
<base href="/">（注意结尾斜杠）：它等价于不加，但能显式声明“以根为基准”，避免后续误加相对路径 - 绝对别写
<base href="./">或<base href="static/">：这类值被浏览器静默忽略，所有相对路径退回到页面 URL，本地开发可能正常，上线后批量 404
子路径部署时必须配对：构建工具 + <base> + 路由
当自适应 SPA 部署在子路径（如 https://example.com/myapp/）时，<base> 不是可选项，而是协同链中一环：
-
<base href="/myapp/">（必须结尾带/）：确保<img src="logo.png">加载/myapp/logo.png - 构建工具 publicPath/base 配置需一致：Vite 的
base: '/myapp/'、Webpack 的publicPath: '/myapp/'，否则 chunk 加载失败 - 前端路由 base 必须同步：Vue Router 的
createRouter({ history: createWebHistory('/myapp/'), ... })，否则router.push('/home')跳到/home而非/myapp/home - 三者缺一不可，且值必须完全相同（包括结尾斜杠）；任何一处漏配或拼写差异（如
/myappvs/myapp/），都会导致资源加载或路由跳转异常
CSS 和 JS 中的路径不受 <base> 影响，这点最容易被忽略
自适应页面常把关键样式抽成 CSS 文件，再用 background: url(../images/bg@2x.png) 实现高清适配。这时要注意：
-
<base href="/myapp/">对background: url(...)**无效**：CSS 内部路径永远相对于该 CSS 文件自身位置解析 -
import('./utils.js')、fetch('/api/data')、new Worker('./worker.js')全部绕过<base>，需靠代码里手动拼接或环境变量处理 - 真正受控的只有 HTML 属性中的纯相对路径：
src、href、action、formaction，以及 CSSurl()在 HTML 解析阶段的初始计算（即内联 style 或<style></style>块里的url()）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
