在响应式网页开发场景中，根据屏幕宽度加载不同样式是适配多端设备的核心需求之一，使用媒体查询分别引入css文件是常用的实现方案，这种方式可以让不同设备的样式代码分离，便于维护和管理。
方法一：使用link标签的media属性引入
这是最常用也最推荐的方式，通过在<link>标签上添加media属性，指定该css文件生效的屏幕条件，浏览器会根据当前设备的屏幕宽度判断是否需要加载对应的文件。
常见的屏幕宽度划分参考如下：
| 设备类型 | 屏幕宽度范围 | media属性值 |
|---|---|---|
| 手机 | 小于768px | max-width: 767px |
| 平板 | 768px到991px | min-width: 768px and max-width: 991px |
| 电脑 | 大于等于992px | min-width: 992px |
下面是完整的html代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按屏幕宽度引入不同css</title> <!-- 通用基础样式，所有设备都加载 --> <link rel="stylesheet" href="base.css"> <!-- 手机端样式，屏幕宽度小于等于767px时生效 --> <link rel="stylesheet" href="mobile.css" media="max-width: 767px"> <!-- 平板端样式，屏幕宽度在768px到991px之间时生效 --> <link rel="stylesheet" href="tablet.css" media="min-width: 768px and max-width: 991px"> <!-- 电脑端样式，屏幕宽度大于等于992px时生效 --> <link rel="stylesheet" href="pc.css" media="min-width: 992px"> </head> <body> <div class="container">响应式内容区域</div> </body> </html>
这种方式的好处是浏览器会并行加载所有css文件，只是根据条件决定是否应用样式，不会阻塞页面渲染，性能表现较好。
方法二：使用@import指令配合媒体查询引入
@import是css提供的导入其他样式表的指令，也可以配合媒体查询条件使用，不过这种方式需要写在css文件内部，不能在html中直接使用。
首先在html中引入一个主css文件：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@import引入不同css</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="container">响应式内容区域</div> </body> </html>
然后在main.css文件中通过@import引入不同条件的样式文件：
/* 通用基础样式 */
.container {
padding: 10px;
}
/* 手机端样式，屏幕宽度小于等于767px时加载 */
@import url("mobile.css") screen and (max-width: 767px);
/* 平板端样式，屏幕宽度在768px到991px之间时加载 */
@import url("tablet.css") screen and (min-width: 768px) and (max-width: 991px);
/* 电脑端样式，屏幕宽度大于等于992px时加载 */
@import url("pc.css") screen and (min-width: 992px);
需要注意@import指令必须放在css文件的最顶部，否则不会生效，而且这种方式会串行加载样式文件，性能上不如link标签的media属性方案，不推荐优先使用。
两种方式的对比和注意事项
- link标签media属性方案性能更好，支持所有现代浏览器，是首选方案
- @import方案兼容性稍差，且会阻塞后续样式加载，仅适合特殊场景使用
- 媒体查询的条件可以根据实际需求调整，比如可以只区分移动端和桌面端，不需要划分太细
- 所有样式文件中的选择器优先级需要统一规划，避免出现样式冲突
- 测试时需要用不同宽度的设备或者浏览器开发者工具的响应式模式验证样式是否生效
常见问题解答
问：如果屏幕宽度刚好在两个条件边界怎么办？
建议在设置条件时避免边界重叠，比如手机用max-width: 767px，平板用min-width: 768px，这样边界值会被平板的条件覆盖，不会出现样式同时生效的问题。
问：可以只引入一个css文件，内部写媒体查询吗？
可以，不过当样式代码量很大时，分离成不同文件更便于维护，两种方式可以根据项目规模选择。
注意：如果样式文件中引用了ipipp.com的资源，不需要做额外处理，按照正常写法即可。
CSS媒体查询响应式设计screen_width引入css文件修改时间：2026-07-17 11:48:28