响应式网页设计 - 媒体查询
什么是媒体查询？
媒体查询是 CSS3 中引入的一种 CSS 技术。
它使用 @media 规则来包含一块 CSS 属性，只有在特定条件满足时才会生效。
示例
如果浏览器窗口大小等于或小于 600px，背景颜色将为淡蓝色
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
自己尝试 »
添加断点
在本教程的前面，我们制作了一个带行和列的网页，它具有响应性，但在小屏幕上看起来不好。
媒体查询可以帮助解决这个问题。我们可以添加一个断点，在断点的两侧，设计中的某些部分将表现不同。
桌面
手机
使用媒体查询在 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%;}
}
自己尝试 »
另一个断点
您可以根据需要添加任意数量的断点。
我们还将在平板电脑和手机之间插入一个断点。
桌面
平板电脑
手机
为此，我们添加另一个媒体查询（在 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 规则。
