响应式网页设计 - 媒体查询
什么是媒体查询?
媒体查询是 CSS3 引入的一种 CSS 技术。
它使用 @media
规则,仅当某个条件为真时才包含一组 CSS 属性。
示例
如果浏览器窗口是 600px 或更小,背景色将为浅蓝色
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
自己动手试一试 »
添加断点
在本教程前面,我们制作了一个带有行和列的网页,它是响应式的,但在小屏幕上看起来并不好看。
媒体查询可以帮助解决这个问题。我们可以添加一个断点,在断点的一侧,某些设计部分会表现出不同的行为。

桌面

Phone
使用媒体查询在 768px 处添加断点
示例
当屏幕(浏览器窗口)小于 768px 时,每一列的宽度应为 100%。
/* 桌面端: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* 手机端: */
[class*="col-"] {
width: 100%;
}
}
自己动手试一试 »
始终为移动设备优先设计
移动设备优先意味着在设计桌面或其他设备之前,先设计移动设备(这将使页面在较小的设备上显示更快)。
这意味着我们必须对 CSS 进行一些更改。
我们不应在宽度变小于 768px 时更改样式,而应在宽度变大于 768px 时更改设计。这将使我们的设计实现移动设备优先。
示例
/* 手机端: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* 桌面端: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
自己动手试一试 »
另一个断点
您可以添加任意数量的断点。
我们将在平板电脑和手机之间插入另一个断点。

桌面

平板电脑

Phone
我们通过添加另一个媒体查询(在 600px 处)和一组用于大于 600px(但小于 768px)设备的新类来实现此目的。
示例
请注意,这两组类几乎相同,唯一的区别是名称(col-
和 col-s-
)
/* 手机端: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* 平板电脑: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* 桌面端: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
看起来我们有两个相同的类集似乎有些奇怪,但这让我们有机会在 HTML 中决定列在每个断点处的行为。
HTML 示例
对于桌面
第一个和第三个部分都将分别跨越 3 列。中间部分将跨越 6 列。
对于平板电脑
第一个部分将跨越 3 列,第二个部分将跨越 9 列,第三个部分将显示在前两个部分下方,并将跨越 12 列。
<div class="row">
<div class="col-3 col-s-3">...</div>
<div class="col-6 col-s-9">...</div>
<div class="col-3 col-s-12">...</div>
</div>
自己动手试一试 »
典型的设备断点
屏幕和设备的数量众多,高度和宽度各不相同,因此很难为每台设备创建精确的断点。为了简化起见,您可以定位五个组。
示例
/* 超小设备(手机,600px 及以下) */
@media only screen and (max-width: 600px) {...}
/* 小设备(竖向平板电脑和大型手机,600px 及以上) */
@media only screen and (min-width: 600px) {...}
/* 中等设备(横向平板电脑,768px 及以上) */
@media only screen and (min-width: 768px) {...}
/* 大设备(笔记本/台式机,992px 及以上) */
@media only screen and (min-width: 992px) {...}
/* 超大设备(大型笔记本和台式机,1200px 及以上) */
@media only screen and (min-width: 1200px) {...}
自己动手试一试 »
方向:纵向/横向
媒体查询还可以用于根据浏览器的方向更改页面的布局。
您可以设置一组 CSS 属性,它们只在浏览器窗口宽度大于高度时应用,这被称为“横向”模式。
示例
如果方向为横向模式,网页将具有浅蓝色背景。
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
自己动手试一试 »
使用媒体查询隐藏元素
媒体查询的另一个常见用途是隐藏不同屏幕尺寸上的元素。
示例
/* 如果屏幕尺寸为 600px 或更小,则隐藏该元素 */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
自己动手试一试 »
使用媒体查询更改字体大小
您还可以使用媒体查询来更改不同屏幕尺寸上元素的字体大小。
可变字体大小。
示例
/* 如果屏幕尺寸为 601px 或更大,则将 <div> 的字体大小设置为 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* 如果屏幕尺寸为 600px 或更小,则将 <div> 的字体大小设置为 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
自己动手试一试 »
CSS @media 参考
有关所有媒体类型和功能/表达式的完整概述,请参阅我们 CSS 参考中的 @media 规则。