多媒体查询-优快云博客

本文链接：https://blog.youkuaiyun.com/mwsblue/article/details/127098737

本文介绍了如何使用CSS中的@media规则来针对不同媒体类型和屏幕尺寸定制样式。通过设置meta标签实现移动设备的兼容性，然后展示了如何定义不同屏幕宽度下的背景颜色。例如，当屏幕宽度小于等于480px时背景为lightgreen，481px到900px之间为red。此外，还提到了如何在外部通过<link>标签引用不同屏幕尺寸的样式表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。
例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。

在内部执行
通过@media可以针对不同屏幕大小定义不同样式的网页，页面会根据浏览器长宽来渲染页面。

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0， maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释：

**width = device-width：**宽度等于当前设备的宽度
**initial-scale：**初始的缩放比例（默认设置为1.0）
**minimum-scale：**允许用户缩放到的最小比例（默认设置为1.0）
**maximum-scale：**允许用户缩放到的最大比例（默认设置为1.0）
**user-scalable：**用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面

实例1：当屏幕的可视窗口宽度小于等于480px时为lightgreen，当大于等于481px和小于等于900px时，为red。

body {
    background-color: pink;
}

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
@media screen and (min-width:481px) and (max-width: 900px) {
    body {
        background-color: red;
    }
}

在外部执行

<link rel="stylesheet" type="text/css" href="css/css1.css" media="screen and (min-width:901px)"/>
<link rel="stylesheet" type="text/css" href="css/css2.css" media="screen and (min-width:580px) and (max-width:900px)" />