媒体查询概念-Web响应式布局入门到实战

当前位置:　首页>> 技术小册>> Web响应式布局入门到实战

**什么是媒体查询？**
媒体查询又叫媒介查询，主要目的是为不同尺寸的屏幕设定不同的CSS样式。

示例代码：

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <style>
        .div0{
            width:200px;
            height:150px;
            border:1px solid red;
        }

@media screen and (min-device-width:100px) and (max-device-width:300px){
            .div0{
                background-color: blue;
            }
        }

@media screen and (min-device-width:301px) and (max-device-width:500px){
            .div0{
                background-color: green;
            }
        }
    </style>
</head>
<body>

<div class="div0">
        <p>div</p>
    </div>
    
</body>
</html>
```

当屏幕尺寸在100-300之间，301-500之间，超过500，分别对其设置样式：

![](/uploads/images/20230421/66eeefb469f399658a4f1ddd80819818.png)

![](/uploads/images/20230421/a7eab607638b6c78f0024a227c909266.png)

![](/uploads/images/20230421/ac028a63cffa8a0fcd3409d0218cb818.png)

该分类下的相关小册推荐：

WebGL开发指南

web前端面试完全指南

uniapp快速入门与实战

vue高级应用开发与构建