媒体查询(Media Queries)是 CSS3 中引入的一种技术,用于根据设备的特性和属性,为不同的媒体类型提供不同的样式规则。媒体查询使得我们可以根据设备的屏幕尺寸、分辨率、屏幕方向、设备类型等条件来适应不同的设备和媒体类型。
媒体查询的语法如下:
@media media-type and (media-feature) {
// 样式规则
}
media-type
表示媒体类型,比如 screen
(屏幕)、print
(打印)等,而 media-feature
是媒体特性,比如 width
(宽度)、height
(高度)、orientation
(方向)等。
未指明类型为默认值 all。
基本使用
- 根据屏幕宽度进行样式调整:
@media screen and (max-width: 600px) {
// 当屏幕宽度小于等于 600px 时应用的样式
}
- 根据屏幕方向调整样式:
@media screen and (orientation: landscape) {
// 当屏幕为横向应用的样式
}
- 根据设备类型调整样式:
@media handheld {
// 当设备为手持设备时应用的样式
}
媒体查询还支持逻辑操作符,如 not
、and
、or
,可以将多个媒体特性进行组合,以更精确地匹配目标设备。
例如:
@media screen and (min-width: 768px) and (max-width: 1024px) {
// 当屏幕宽度在 768px 到 1024px 之间时应用的样式
}
引用方法
-
link:
使用<link>
标签将外部样式表文件链接到 HTML 文件中:<link rel="stylesheet" href="styles.css" media="screen">
-
xml:
<? xml-stylesheet rel="stylesheet" media="screen" href="style.css"?>
-
@import
@import url('./index.css') screen
-
@media
@media screen { /* 具体样式 */ }