最推荐的方式是单CSS文件+移动优先的媒体查询；若需分离文件，应合理使用media属性并理解其仍会下载所有CSS，结合prefers-color-scheme等特性可提升适配准确性。
移动端和PC端样式区分，最常用且推荐的方式是用媒体查询（Media Queries）配合 <link> 标签引入不同 CSS 文件，但要注意：**浏览器会下载所有 <link> 指定的 CSS，即使媒体条件不匹配**（除非使用 media 属性合理控制）。因此更高效的做法是：**只用一个 HTML 文件，通过媒体查询在单个 CSS 中写响应式规则**；若确需分离文件，应结合 media 属性 + rel="stylesheet"，并理解其加载行为。
用 media 属性按设备类型引入不同 CSS
可在 HTML 的 <head> 中分别引入针对不同视口的样式表，利用 media 属性声明适用条件：
-
media="screen and (max-width: 768px)"→ 适配小屏（如手机） -
media="screen and (min-width: 769px)"→ 适配 PC 或大屏平板
示例：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"><link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)">
注意：media 不等于“不加载”
media 属性仅控制样式是否生效（即是否应用），**大多数现代浏览器仍会下载两个 CSS 文件**（除非使用 rel="preload" + as="style" + onload 动态加载等进阶方案）。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 纯靠
media切换文件无法节省带宽 - 对性能敏感项目，建议优先采用单 CSS + 媒体查询写法
- 若必须拆分（如团队分工、遗留系统改造），可搭配
prefers-reduced-motion或hover等逻辑进一步细化
更推荐：单 CSS + 媒体查询写响应式
把移动端基础样式写在前面，PC 端增强样式用 @media (min-width: 769px) 包裹，结构清晰、加载高效、维护简单：
header { padding: 12px; }
nav a { display: block; }
/* desktop-only 增强 */
@media (min-width: 769px) {
header { padding: 24px 40px; }
nav a { display: inline-block; margin-right: 20px; }
}
补充：用 prefers-color-scheme 或 hover 辅助判断设备能力
单纯靠宽度判断有时不够（比如折叠屏、横竖屏切换）。可结合其他媒体特性提升准确性：
-
media="(hover: hover)"→ 表示设备支持悬停（大概率是鼠标操作，倾向 PC） -
media="(pointer: fine)"→ 触控精度高（如触控笔或鼠标），非典型触摸屏 -
media="(prefers-reduced-motion: reduce)"→ 用户偏好减少动画，与设备无关但影响体验设计
