css零到一高级教程029：CSS 媒体查询 - 实例

慕容屠苏

于 2022-04-01 21:19:50 发布

阅读量540

点赞数

分类专栏： css零到一文章标签： css html 前端

本文链接：https://blog.csdn.net/kerryqpw/article/details/123907786

版权

css零到一专栏收录该内容

98 篇文章 2 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何使用CSS媒体查询实现响应式设计，包括改变背景色、创建响应式菜单、调整列布局、隐藏元素、改变字体大小、构建弹性图片库和网站，并根据设备方向和屏幕尺寸定制样式。通过实例展示了媒体查询在不同场景的应用。

摘要由CSDN通过智能技术生成

CSS 媒体查询 - 更多实例

让我们看看使用媒体查询的更多例子。

媒体查询是一种流行的技术，用于将定制的样式表传递给不同的设备。

下面演示一个简单的例子，让我们来更改不同设备的背景色：

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: tan;
  color: black;
}

/* 在宽度为 992px 或更小的屏幕上，背景颜色为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
    color: white;
  }
}

/* 在宽度为 600px 或更小的屏幕上，背景色为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }
}
</style>
</head>
<body>

<h1>请调整浏览器窗