css媒体查询引入不同样式如何实现-css教程-PHP中文网

css媒体查询引入不同样式如何实现

P粉602998670

发布： 2025-10-12 10:17:01

原创

982人浏览过

网页开发中通过CSS媒体查询适配不同设备，主要采用两种方式：一是在CSS文件中使用@media规则针对不同屏幕尺寸定义样式，如设置容器宽度和字体大小；二是通过HTML的link标签结合media属性按条件加载外部CSS文件，如为移动设备或打印场景引入特定样式。常用断点包括480px（手机）、768px（平板）、992px及以上（桌面），需注意样式覆盖顺序与响应范围衔接，确保页面在各类设备上良好显示。

css媒体查询引入不同样式如何实现

在网页开发中，为了适配不同设备（如手机、平板、桌面），我们常使用CSS媒体查询来引入或应用不同的样式。实现方式主要有两种：在同一个CSS文件中使用 @media 规则，或者通过HTML的link标签根据条件加载不同的CSS文件。

1. 使用 @media 在CSS内部定义响应式样式

这是最常见的方式。你可以在一个CSS文件中根据不同屏幕尺寸编写多套样式规则。

示例：

/* 默认样式 */
.container {
  width: 100%;
}
<p>/<em> 屏幕宽度至少为768px时应用 </em>/
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}</p><p>/<em> 屏幕宽度至少为992px时 </em>/
@media (min-width: 992px) {
.container {
width: 970px;
}
}</p><p>/<em> 屏幕最大宽度为480px（适用于小屏手机） </em>/
@media (max-width: 480px) {
body {
font-size: 14px;
}
}

登录后复制

2. 使用 link 标签按条件引入外部CSS文件

你也可以将不同设备的样式写在独立的CSS文件中，并通过HTML的link标签结合media属性来控制加载时机。

示例：

<!-- 默认样式 -->
<link rel="stylesheet" href="base.css">
<p><!-- 仅在打印时加载 -->
<link rel="stylesheet" href="print.css" media="print"></p><p><!-- 仅在屏幕且最小宽度768px时加载 -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)"></p><p><!-- 仅在最大宽度480px的屏幕上加载 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)">

登录后复制