CSS 媒体查询实例

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;  }}

亲自试一试

您想知道我们为什么要精确使用 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%;  }}

亲自试一试

列的媒体查询

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

大型屏幕:

中等屏幕:

小型屏幕:

实例

/* 创建彼此相邻浮动的四个相等的列 */.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%;  }}

亲自试一试

提示:更现代的创建列布局方法是使用 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;  }}

亲自试一试

用媒体查询隐藏元素

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

在小屏幕上我会隐藏。

实例

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

亲自试一试

用媒体查询改变字体

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

可变的字体大小。

实例

/* 如果屏幕尺寸超过 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;  }}

亲自试一试

弹性图片库

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

实例

亲自试一试

弹性网站

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

实例

亲自试一试

方向:人像 / 风景

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

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

实例

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

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

亲自试一试

最小宽度到最大宽度

您还可以使用 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;  }}

亲自试一试

使用附加值:在下面的例子中,我们使用逗号(类似 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;  }}

亲自试一试

CSS @media 参考手册

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

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