推荐在单个CSS文件内使用@media规则做响应式布局，按视口宽度设断点（如768px、1024px），结合device-pixel-ratio适配高清屏，避免用多个link标签引入CSS。
可以通过 CSS 媒体查询（@media）为不同屏幕分辨率（或视口宽度）应用不同的样式规则，而不是用多个 <link> 标签引入不同 CSS 文件。现代前端开发中，**推荐在单个 CSS 文件内使用 @media 规则做响应式布局**，更高效、易维护。
用 @media 写分辨率适配样式
媒体查询根据视口宽度（width）、设备像素比（device-pixel-ratio）、方向（orientation）等条件匹配并生效对应样式。
- 常用写法是按 视口宽度（viewport width） 划分断点，例如：
@media screen and (max-width: 768px) { /* 手机样式 */ }@media screen and (min-width: 769px) and (max-width: 1024px) { /* 平板样式 */ }@media screen and (min-width: 1025px) { /* 桌面样式 */ } - 注意：断点数值不是“设备分辨率”，而是浏览器窗口的 CSS 像素宽度（即视口宽度），受缩放、横竖屏、meta viewport 设置影响。
- 可结合
min-resolution或-webkit-min-device-pixel-ratio区分高清屏（如 Retina）：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* 高清屏专用样式，比如替换 @2x 图片 */ }
不推荐：用 media 属性 link 多个 CSS 文件
虽然 HTML 中支持给 <link> 标签加 media 属性（如 <link rel="stylesheet" href="mobile.css" media="max-width:768px">），但存在明显问题：
- 浏览器仍会下载所有带
media的 CSS 文件（即使不匹配），影响加载性能； - 无法保证加载顺序和优先级，容易引发样式覆盖混乱；
- 不利于 CSS 压缩、缓存和工程化管理（如 Webpack、Vite）。
实际建议的响应式结构
一个典型做法是：
立即学习“前端免费学习笔记（深入）”；
- 基础样式（通用、移动优先）写在最前面；
- 用
@media (min-width: 768px)往上递进增强平板样式； - 再用
@media (min-width: 1024px)补充桌面端细节（如侧边栏、栅格列数）； - 必要时用
@media (prefers-reduced-motion: reduce)或(prefers-color-scheme: dark)做无障碍/主题适配。
补充：确保媒体查询生效的前提
别忘了在 HTML <head> 中加入标准 viewport meta 标签，否则移动端媒体查询可能失效：
