<!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>Document</title>
<style>
/*
使用媒体查询
语法：@media 查询规则{ }
媒体类型，
all 所有设备
print 打印设备
screen 带屏幕的设备
spech 屏幕阅读器
可以使用，链接多个媒体类型，这样他们之间就是一个或的关系
可以在媒体类型前添加一个only，表示只有。
only的使用主要是为了兼容一些老版本浏览器
*/
/* @media print, scren {
body {
background-color: red;
}
} */
@media only screen {
body {
background-color: aqua;
}
}
</style>
</head>
<body>
<!--
响应式布局
网页可以根据不通的设备或窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有设备
响应式布局的关键就是，媒体查询
通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式
-->
</body>
</html>
响应式布局
网页可以根据不通的设备或窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有设备
响应式布局的关键就是，媒体查询
通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具