菜鸟教程
教程 css tutorial

媒体查询语法

媒体查询（Media Queries）是响应式网页设计的核心工具，允许根据用户的设备条件（如屏幕宽度、方向等）定义不同的样式规则。

1. 基本语法

css 
@media 条件 {
  /* 仅当条件满足时才会应用的样式 */
}

示例：

css 
@media (max-width: 768px) {
  body {
    background-color: #f0f4c3;
  }
}

当浏览器宽度小于等于 768px 时，页面背景色会变为浅绿色。

2. 常见条件

条件 示例 说明
max-width (max-width: 768px) 最大宽度，小于等于时匹配
min-width (min-width: 1024px) 最小宽度，大于等于时匹配
orientation (orientation: landscape) 横屏或竖屏方向
max-height (max-height: 600px) 最大高度

3. 组合条件

可以使用 and、,（逗号）来组合多个条件：

css 
@media (min-width: 600px) and (max-width: 1200px) {
  .container {
    padding: 40px;
  }
}

媒体查询示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>CSS 媒体查询示例</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
text-align: center;
}


.box {
  width: 80%;
  margin: 40px auto;
  padding: 20px;
  background-color: #4dd0e1;
  color: white;
  font-size: 20px;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .box {
    background-color: #f06292;
    font-size: 16px;
  }
}

@media (orientation: landscape) {
  .box::after {
    content: &quot;（横屏模式）&quot;;
    display: block;
    margin-top: 10px;
  }
}



</style>
</head>


<body>
<div class="box">请尝试调整窗口宽度或旋转屏幕方向</div>
</body>


</html>

相关内容