@media not|only mediatype and (expressions) { CSS-Code;}not：表示不匹配指定的媒体类型。only：表示只匹配指定的媒体类型，这可以避免老旧浏览器实行不必要的样式表下载。mediatype：指的是媒体类型，如 screen、print 等。expressions：是一系列的媒体特性表达式，用来定义媒体查询的详细条件。示例
一个大略的媒体查询示例：
/ 默认样式 /body { background-color: lightblue;}/ 当视口宽度小于600px时，改变背景颜色 /@media screen and (max-width: 600px) { body { background-color: lightgreen; }}常见的媒体特性
一些常用的媒体特性包括：
width：视口的宽度。height：视口的高度。orientation：设备的方向（portrait 或 landscape）。aspect-ratio：视口的宽高比。device-pixel-ratio：设备的像素比率。hover：设备是否支持悬停操作。pointer：设备的指针精度。我们可以针对手机、平板和电脑屏幕进行适配。手机 - 常日屏幕宽度在 320px 到 480px 之间。平板 - 屏幕宽度一样平常在 600px 到 1024px 之间。电脑 - 屏幕宽度常日大于 1024px。下面是针对这些设备的一个大略相应式布局示例。我们将利用一个大略的两栏布局，个中包含一个紧张内容区域和一个侧边栏。侧边栏在手机屏幕上会被隐蔽，在平板屏幕上会显示为下方的内容块，在电脑屏幕上则会显示为右侧的侧边栏。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Layout Example</title> <link rel="stylesheet" href="styles.css"></head><body> <header> <h1>Responsive Design Example</h1> </header> <div class="container"> <main> <article> <h2>Main Content</h2> <p>This is the main content area. It will always be visible regardless of the device.</p> </article> </main> <aside> <h2>Sidebar</h2> <p>This is the sidebar with additional information. Its visibility and position will change based on the device type.</p> </aside> </div> <footer> <p>Footer Content</p> </footer></body></html>CSS 样式
/ 全局样式 /body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; color: #333; background-color: #f4f4f4;}.container { max-width: 1200px; margin: 0 auto; padding: 20px;}header, footer { background: #555; color: #fff; text-align: center; padding: 10px 0;}header h1, footer p { margin: 0;}main, aside { background: #fff; padding: 20px; margin-bottom: 20px;}/ 手机屏幕 /@media (max-width: 480px) { aside { display: none; / 隐蔽侧边栏 / }}/ 平板屏幕 /@media (min-width: 481px) and (max-width: 1024px) { aside { display: block; / 显示侧边栏 / width: 100%; / 侧边栏霸占全宽 / margin-top: 20px; / 添加顶部间距 / }}/ 电脑屏幕 /@media (min-width: 1025px) { .container { display: flex; justify-content: space-between; } main { flex: 2; / 紧张内容霸占2/3的宽度 / } aside { flex: 1; / 侧边栏霸占1/3的宽度 / }}阐明全局样式：设置基本的字体、颜色、间距等。手机屏幕：当屏幕宽度小于或即是 480px 时，侧边栏将被隐蔽。平板屏幕：当屏幕宽度介于 481px 和 1024px 之间时，侧边栏将显示，并霸占全体宽度，位于紧张内容下方。电脑屏幕：当屏幕宽度大于 1024px 时，主内容区和侧边栏将并排显示，主内容区霸占2/3的宽度，侧边栏霸占1/3的宽度。
