CSS媒体查询

a濯

已于 2024-04-28 15:45:52 修改

阅读量82

点赞数

文章标签：前端 css3

于 2023-10-25 16:34:09 首次发布

本文链接：https://blog.csdn.net/qq_46738283/article/details/134038067

版权

定义媒体查询

使用 @media 或 @import 规则在样式表中指定对应的设备类型；
用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的设备类型。

1、 @media

使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。示例代码如下：

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
 
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

2、@import

@import 用来导入指定的外部样式文件并指定目标的媒体类型，示例代码如下：

@import url("css/screen.css") screen;   /* 引入外部样式，该样式仅会应用于电脑显示器 */
@import url("css/print.css") print;     /* 引入外部样式，该样式仅会应用于打印设备 */
body {
    background: #f5f5f5;
    line-height: 1.2;
}

注意：所有 @import 语句都必须出现在样式表的开头，而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式。

3、media 属性

您还可以在 <style>、<link>、<source> 等标签的 media 属性中来定义媒体查询，示例代码如下：

/* 当页面宽度大于等于 900 像素时应用该样式 */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
/* 当页面宽度小于等于 600 像素时应用该样式 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

提示：在 media 属性中您还可以指定多种媒体类型，每种媒体类型之间使用逗号进行分隔，例如 media="screen, print"。