加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

CSS 媒体查询 - 实例 详解

css3基础 2022-05-23 12:08:48小码哥的IT人生shichen

CSS 媒体查询 - 实例

CSS 媒体查询 - 更多实例

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

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

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

CSS 媒体查询

示例代码：

/* 将 body 的背景色设置为棕褐色 */
body {
  background-color: tan;
}
/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

 

完整实例【亲自试一试】：

<!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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

您想知道我们为什么要精确使用 992px 和 600px 吗？它们就是我们所称的设备的“典型断点”（typical breakpoints）。您可以在我们的 响应式 Web 设计教程 中学习有关典型断点的更多知识。

菜单的媒体查询

在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

大型屏幕：

小型屏幕：

示例代码：

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 设置顶部导航栏样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 悬停时改变颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>响应式导航菜单</h1>
<p>请调整浏览器窗口的大小以查看效果：当屏幕小于 600 像素时，导航菜单将垂直显示，而不是水平显示。</p>
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

大型屏幕：

中等屏幕：

小型屏幕：

示例代码：

/* 创建彼此相邻浮动的四个相等的列 */
.column {
  float: left;
  width: 25%;
}
/* 在 992p x或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 创建彼此相邻浮动的四个等列 */
.column {
  float: left;
  width: 25%;
  padding: 20px;
}
/* 清除列后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在宽度小于或等于 600px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>响应式四列布局</h1>
<p><b>请调整浏览器窗口的大小以查看响应效果。</b>在宽度小于或等于 992px 的屏幕上，列的大小将从四列调整为两列。在宽度为 600px 或更小的屏幕上，这些列将堆叠在一起，而不是彼此相邻。</p>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

提示：更现代的创建列布局方法是使用 CSS Flexbox（请参见下面的例子）。但是，Internet Explorer 10 以及更早版本不支持它。如果需要 IE6-10 的支持，请使用浮动（如上所示）。

如需学习有关弹性框布局模块的更多知识，请学习 CSS Flexbox 这一章。

如需学习有关响应式 Web 设计的更多知识，请学习我们的 响应式 Web 设计教程。

示例代码：

/* 弹性盒的容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* 创建四个相等的列 */
.column {
  flex: 25%;
  padding: 20px;
}
/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 弹性框的容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* 创建四个等列 */
.column {
  flex: 25%;
  padding: 20px;
}
/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* 在宽度小于或等于 60px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
</style>
</head>
<body>
<h1>响应式四列弹性布局</h1>
<p><b>请调整浏览器窗口的大小以查看响应效果。</b>在宽度小于或等于 992px 的屏幕上，列的大小将从四列调整为两列。在宽度为 600px 或更小的屏幕上，这些列将堆叠在一起，而不是彼此相邻。</p>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

用媒体查询隐藏元素

媒体查询的另一种常见用法是在不同屏幕尺寸上隐藏元素：

在小屏幕上我会隐藏。

示例代码：

/* 如果屏幕尺寸为600像素或更小，请隐藏该元素 */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: yellow;
  padding: 20px;
}
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
</style>
</head>
<body>
<h1>隐藏不同屏幕尺寸的元素</h1>
<div class="example">Example DIV.</div>
<p>当浏览器的宽度为 600 像素或更小时，隐藏 div 元素。请调整浏览器窗口的大小以查看效果。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

用媒体查询改变字体

您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

可变的字体大小。

示例代码：

/* 如果屏幕尺寸超过 600 像素，把 <div> 的字体大小设置为 80 像素 */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* 如果屏幕大小为 600px 或更小，把 <div> 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: lightgrey;
  padding: 20px;
}
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
</style>
</head>
<body>
<h1>在不同的屏幕尺寸上更改元素的字体大小</h1>
<div class="example">Example DIV.</div>
<p>当浏览器的宽度为 600 像素或更小时，将 DIV 的字体大小设置为 30px。当它是 601 像素或更宽时，将字体大小设置为 80 像素。请调整浏览器窗口的大小以查看效果。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

弹性图片库

在此例中，我们将媒体查询与 flexbox 一起使用来创建响应式图片库：

示例代码：

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial;
}
.header {
  text-align: center;
  padding: 32px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* 创建彼此相邻的四个相等的列 */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
}
/* 响应式布局 - 制作两列而不是四列的布局 */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
/* 响应式布局 - 使两列相互堆叠而不是彼此并排 */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>
<!-- Header -->
<div class="header">
  <h1>响应式图像网格</h1>
  <p>请调整浏览器窗口的大小以查看响应效果。</p>
</div>
<!-- Photo Grid -->
<div class="row">
  <div class="column">
    <img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
	<img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
    <img src="/i/photo/tulip.jpg" style="width:100%">
    <img src="/i/photo/flower-3.jpg" style="width:100%">
    <img src="/i/photo/flower-1.jpg" style="width:100%">
	<img src="/i/photo/flower-4.jpg" style="width:100%">
	<img src="/i/photo/tulip-red.jpg" style="width:100%">
    <img src="/i/photo/tulip-yellow.jpg" style="width:100%">
    <img src="/i/photo/flower-2.jpg" style="width:100%">
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

弹性网站

在本例中，我们将媒体查询与 flexbox 一起使用，以创建响应式网站，其中包含弹性导航栏和弹性内容。

示例代码：

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 设置 body 的样式 */
body {
  font-family: Arial;
  margin: 0;
}
/* 页眉/LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}
/* 设置顶部导航栏的样式 */
.navbar {
  display: flex;
  background-color: #333;
}
/* 设置导航栏链接的样式 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}
/* 悬停时改变颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* 列容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* 创建两个彼此相邻的不相等的列 */
/* 侧栏/左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}
/* 伪图像，仅用于此例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
/* 响应式布局 - 当屏幕宽度小于 700 像素时，使两列相互堆叠，而不是彼此相邻 */
@media screen and (max-width: 700px) {
  .row, .navbar {
    flex-direction: column;
  }
}
</style>
</head>
<body>
<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">请调整浏览器窗口的大小以查看响应效果。</h4>
</div>
<!-- Header -->
<div class="header">
  <h1>My Website</h1>
  <p>With a <b>flexible</b> layout.</p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Sep 2, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>
<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

方向：人像 / 风景

媒体查询还可以用于根据浏览器的方向更改页面的布局。

您可以设置一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时才适用，即所谓的横屏：

示例代码：

如果方向处于横向模式，则使用浅蓝背景色：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>
<p>请调整浏览器窗口的大小。如果此文档的宽度大于高度，背景色为“浅蓝色”，否则为“浅绿色”。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

最小宽度到最大宽度

您还可以使用 max-width 和 min-width 属性设置最小宽度和最大宽度。

例如，当浏览器的宽度在 600 到 900 像素之间时，更改 <div> 元素的外观：

示例代码：

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
</style>
</head>
<body>
<h1>在不同的屏幕尺寸上更改 DIV 的外观</h1>
<div class="example">Example DIV.</div>
<p>当浏览器的宽度在 600 到 900 像素之间时，更改 DIV 的外观。<b>请调整浏览器窗口大小以查看效果。</b></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

使用附加值：在下面的例子中，我们使用逗号（类似 OR 运算符）将附加的媒体查询添加到已有媒体查询中：

示例代码：

/* 当宽度在 600 像素到 900 像素之间或大于 1100 像素时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example{
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
</style>
</head>
<body>
<h1>在不同的屏幕尺寸上更改 DIV 的外观</h1>
<div class="example">Example DIV.</div>
<p>当浏览器的宽度介于 600 和 900 像素之间或大于 1100 像素时，请更改 DIV 的外观。<b>请调整浏览器窗口大小以查看效果。</b></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述，请查看 CSS 参考中的 @media 规则。

提示：如需学习有关响应式 Web 设计（如何针对不同的设备和屏幕）的更多知识，以及使用媒体查询断点，请阅读我们的 响应式 Web 设计教程。

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024