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

慕容屠苏

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

阅读量521

点赞数

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

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

版权

css零到一专栏收录该内容

98 篇文章 2 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

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>请调整浏览器窗口大小以查看效果！</h1>
<p>默认情况下，文档的背景色为棕褐色。如果屏幕尺寸为 992px 或更小，则颜色将变为蓝色。如果小于或等于 600px，它将变为橄榄色。</p>

</body>
</html>

了解本专栏

超级会员免费看

慕容屠苏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css零到一高级教程029：CSS 媒体查询 - 实例

CSS 媒体查询 - 更多实例让我们看看使用媒体查询的更多例子。媒体查询是一种流行的技术，用于将定制的样式表传递给不同的设备。下面演示一个简单的例子，让我们来更改不同设备的背景色：实例<!DOCTYPE html><html><head><style>body { background-color: tan; color: black;}/* 在宽度为 992px 或更小的屏幕上，背景颜色为蓝色 */@m.
复制链接

扫一扫