媒体查询是 CSS3 中的一个特性，它允许网页根据设备的特性、屏幕尺寸或浏览器窗口大小来应用不同的 CSS 样式。通过媒体查询，我们可以在不同的设备上展示不同的布局和样式，以提供更好的用户体验。
在本文中，我们将演示几个常见的媒体查询实例。
1. 响应式布局
响应式布局是通过媒体查询来实现的一种布局方式，它能够根据设备的屏幕尺寸自动调整布局和样式。以下是一个简单的响应式布局示例：
/* 默认样式 */
.container {
width: 100%;
padding: 20px;
}
/* 在小屏幕上调整布局 */
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
}
/* 在大屏幕上调整布局 */
@media screen and (min-width: 1200px) {
.container {
width: 80%;
margin: 0 auto;
}
}
在上面的代码中，我们通过媒体查询定义了三个不同屏幕尺寸下的样式。当屏幕宽度小于等于 768px 时，.container 元素的内边距将变为 10px；当屏幕宽度大于等于 1200px 时，.container 元素的宽度将变为 80% 并且居中对齐。
2. 隐藏和显示元素
使用媒体查询，我们还可以根据设备的屏幕尺寸来隐藏或显示特定的元素。以下是一个例子：
/* 默认样式 */
.sidebar {
display: block;
}
/* 在小屏幕上隐藏侧边栏 */
@media screen and (max-width: 768px) {
.sidebar {
display: none;
}
}
/* 在大屏幕上隐藏主内容区域 */
@media screen and (min-width: 1200px) {
.content {
display: none;
}
}
在上述代码中，.sidebar 元素在默认样式下是可见的，然而在小于等于 768px 的屏幕尺寸下会被隐藏，而.content 元素在大于等于 1200px 的屏幕尺寸下会被隐藏。
3. 调整字体大小
媒体查询可以帮助我们根据设备的屏幕尺寸来调整字体的大小，以确保在不同尺寸的屏幕上都能够正常显示。以下是一个示例：
/* 默认样式 */
body {
font-size: 16px;
}
/* 在小屏幕上调整字体大小 */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 在大屏幕上调整字体大小 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}
在上面的代码中，.sidebar 元素在默认样式下是可见的，然而在小于等于 768px 的屏幕尺寸下会被隐藏，而.content 元素在大于等于 1200px 的屏幕尺寸下会被隐藏。
总结
媒体查询是前端开发中非常有用的工具，它可以帮助我们根据设备的特性来应用不同的样式和布局。在本文中，我们演示了响应式布局、元素的隐藏和显示以及调整字体大小等常见的媒体查询实例。
通过灵活运用媒体查询，我们可以为不同的设备提供专门定制的用户体验，并保障网站在各种屏幕上的可访问性。如果你还没有使用媒体查询，我强烈推荐你学习并使用这个强大的 CSS3 特性！
本文来自极简博客，作者：心灵画师，转载请注明原文链接：CSS 媒体查询实例演示
