前端必知必会-响应式网页设计之媒体查询

---

响应式网页设计 - 媒体查询

什么是媒体查询？

媒体查询是 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) {
/* For desker: */
.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;
}
}

---

总结

本文介绍了响应式网页设计之媒体查询的使用，如有问题欢迎私信和评论