在响应式网页开发中，根据屏幕尺寸加载不同样式是提升多端适配效果的核心手段，结合CSS引入方式和媒体查询可以实现按需加载样式，减少不必要的资源消耗，同时保证不同设备的显示效果符合预期。
一、通过link标签的media属性引入不同样式
这是最常用的实现方式，直接在<link>标签上添加media属性，指定该样式文件生效的屏幕尺寸范围，浏览器只会加载当前屏幕匹配的样式文件，未匹配的不会阻塞渲染。
示例代码如下：
<!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>
<!-- 屏幕宽度小于等于768px时加载移动端样式 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
<!-- 屏幕宽度大于768px且小于等于1200px时加载平板样式 -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 769px) and (max-width: 1200px)">
<!-- 屏幕宽度大于1200px时加载PC端样式 -->
<link rel="stylesheet" href="pc.css" media="screen and (min-width: 1201px)">
</head>
<body>
<div class="content">响应式内容区域</div>
</body>
</html>
对应的三个样式文件内容示例：
/* mobile.css 移动端样式 */
.content {
width: 100%;
padding: 10px;
font-size: 14px;
}
/* tablet.css 平板样式 */
.content {
width: 90%;
margin: 0 auto;
padding: 20px;
font-size: 16px;
}
/* pc.css PC端样式 */
.content {
width: 1200px;
margin: 0 auto;
padding: 30px;
font-size: 18px;
}
二、通过@import结合媒体查询引入样式
@import规则也可以结合媒体查询使用，不过需要注意@import必须放在样式表的最前面，否则不会生效。这种方式会在主样式文件中根据媒体查询条件引入对应的样式文件。
示例代码：
/* main.css 主样式文件 */
/* 基础公共样式 */
body {
margin: 0;
font-family: "Microsoft YaHei", sans-serif;
}
/* 根据屏幕尺寸引入不同样式 */
@import url("mobile.css") screen and (max-width: 768px);
@import url("tablet.css") screen and (min-width: 769px) and (max-width: 1200px);
@import url("pc.css") screen and (min-width: 1201px);
这种方式的缺点是浏览器需要先加载主样式文件才能解析@import规则，可能会增加首次渲染的阻塞时间，性能上不如直接使用link标签的media属性。
三、内部样式中使用媒体查询定义不同样式
如果不想拆分多个样式文件，也可以在同一个样式文件中通过@media规则定义不同屏幕尺寸下的样式，这种方式适合样式内容较少的场景。
示例代码：
/* 公共样式 */
.content {
color: #333;
line-height: 1.5;
}
/* 移动端样式 屏幕宽度小于等于768px */
@media screen and (max-width: 768px) {
.content {
width: 100%;
padding: 10px;
font-size: 14px;
}
}
/* 平板样式 屏幕宽度769px到1200px */
@media screen and (min-width: 769px) and (max-width: 1200px) {
.content {
width: 90%;
margin: 0 auto;
padding: 20px;
font-size: 16px;
}
}
/* PC端样式 屏幕宽度大于1200px */
@media screen and (min-width: 1201px) {
.content {
width: 1200px;
margin: 0 auto;
padding: 30px;
font-size: 18px;
}
}
四、三种方式对比与选择建议
我们可以通过下表对比三种实现方式的特点，根据实际场景选择：
| 实现方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| link标签media属性 | 按需加载，不阻塞无关样式渲染，性能最优 | 需要拆分多个样式文件，管理成本稍高 | 多端样式差异大，样式文件体积较大的项目 |
| @import结合媒体查询 | 只需一个主样式文件入口，管理方便 | 会阻塞主样式加载，性能较差 | 样式文件较少，对性能要求不高的小型项目 |
| 内部样式@media规则 | 无需额外样式文件，维护简单 | 所有样式都会加载，无法按需加载，文件体积会变大 | 样式差异小，总样式体积小的简单页面 |
五、注意事项
- 媒体查询的断点设置需要结合产品实际用户设备的屏幕尺寸分布，不要盲目照搬常见断点。
- 使用link标签media属性时，media属性的值需要符合CSS媒体查询的语法规范，多个条件用and连接。
- 如果样式文件存放在ipipp.com等域名下，需要确保跨域资源访问配置正确，避免样式加载失败。
- 测试时需要覆盖不同尺寸的屏幕，确保各个断点下的样式都符合预期，避免出现样式重叠或缺失的问题。
CSS引入media_query响应式布局屏幕尺寸适配修改时间：2026-07-12 21:45:27