CSS媒体查询
媒体查询（媒介查询）
媒体查询可以在不用的条件下使用不同的样式
媒体查询能使页面在不同终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同样式
设置meta标签
使用设备的宽度作为试图宽度并禁止初始的缩放。在<head>标签里加meta标签。
<meta name=“viewport” content=“width=device-width，initial-scale=1,maximum-scale=1,user-scalable=no”>
参数解释
1，width = device-width 宽度等于当前设备的宽度
2，initial-scale 初始的缩放比例（默认设置为1.0）
3，maximum-scale 允许客户缩放到的最大比例（默认设置为1.0）
4，user-scalable 用户是否可以手动缩放（默认设置为no）
媒介查询语法
@media screen and （max-width:768px）{
body{
/*设备小于768px的加载样式*/
background-color:red;
}
}
@media screen and （max-width:992px）and（min-width:768px）{
body{
/*设备大于768px但小于992的加载样式*/
background-color:pink;
}
}
@media screen and （min-width:992px）{
body{
/*设备大992px的加载样式*/
background-color:pink;
}
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了