浅谈响应式布局

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

背景

在网页设计的早期，页面是针对特定屏幕尺寸构建的。如果用户的屏幕比设计人员预期的要大或小，则结果从不需要的滚动条到过长的行长度以及空间利用不佳不等。随着更多样化的屏幕尺寸的出现，响应式网页设计（RWD）的概念出现了，这是一套允许网页改变其布局和外观以适应不同屏幕宽度，分辨率等的做法。

响应式设计

响应式设计一词是由伊桑·马科特（Ethan Marcotte）在2010年创造的，描述了三种技术的组合使用。

• fluid grid(流体网格)
• fluid image(流体图片)
• media query(媒体查询)

重要的是要了解响应式网页设计不是一种单独的技术 - 它是一个用于描述网页设计方法或一组最佳实践的术语，用于创建可以响应用于查看内容的设备的布局。

实现响应式

在此分享七种实现响应式布局的方式：

1. media query(媒体查询)

首先第一种是我们耳熟能详的媒体查询，其查询媒体视区，调整整个布局或部分布局以最适合各种屏幕尺寸。

@media screen and (min-width: 800px) {
  .container {
    width: 480px;
  }
}

使用媒体查询时的一种常见方法是为窄屏幕设备（例如移动电话）创建简单的单列布局，然后检查是否有较大的屏幕，并在知道您有足够的屏幕宽度来处理它时实现多列布局。这通常被描述为移动优先设计。

HTML 中的媒体查询

在HTML中，媒体查询可以应用于各种元素：

• 在 <link> 元素的 media属性中，它们定义应应用链接资源（通常为 CSS）的媒体。

<source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)">

<link media="value">

注：需要注意浏览器是否支持

值	描述
screen	计算机屏幕（默认）。
tty	电传打字机以及类似的使用等宽字符网格的媒介。
tv	电视机类型设备（低分辨率、有限的滚屏能力）。
projection	放映机。
handheld	手持设备（小屏幕、有限带宽）。
print	打印预览模式/打印页面。
braille	盲人点字法反馈设备。
aural	语音合成器。
all	适用于所有设备。

• 在<source>元素的 media 属性(与link中的media属性一样)中，它们定义应应用该源的媒体。（这仅在<picture>元素中有效。
• 在 <style>元素的 media属性(与link中的media属性一样)中，它们定义应应用样式的媒体。

JavaScript 中的媒体查询

在 JavaScript 中，可以使用 Window.matchMedia（）方法针对媒体查询测试窗口。您还可以使用 MediaQueryList.addListener（）在查询状态更改时收到通知。借助此功能，您的网站或应用可以响应设备配置、方向或状态的更改。

2.fluid grid流体网格

响应式网站在断点之间更改其布局，意味着对每个可能的设备尺寸，并为其构建像素完美的布局，而通过使用灵活的网格，您只需添加断点并在内容开始看起来不好的位置更改设计。

网格布局通过为每个元素指定一个百分比宽度，并确保整个布局的总数不超过 100%，实现了灵活的布局。

百分比宽度：采用使用像素设计的布局并将其转换为百分比。

target / context = result

例如，如果我们的目标列大小为 60 像素，而它所在的上下文（或容器）为 980 像素，则在将小数点向右移动两位后，我们将 60 除以 980 以获得可以在 CSS 中使用的值。

.col {
  width: 6.12%; /* 60 / 980 = 0.0612 */
}

3. Multicol多列布局

当您指定column-count 时，这表示您希望将内容拆分为多少列。然后，浏览器计算出这些的大小，该大小将根据屏幕大小而变化。

.container {
  column-count: 3;
}

如果改为指定 ，则指定最小宽度column-width。浏览器将创建任意数量的该宽度的列，以便舒适地放入容器中，然后在所有列之间共享剩余空间。因此，列数将根据有多少空间而变化。

.container {
  column-width: 10em;
}

4. flex弹性布局

在 Flexbox 中，父盒子将根据其容器中的空间弹性的给子盒子分配空间。

如下，每个子盒子占有相同的空间大小：

.container {
  display: flex;
}

.item {
  flex: 1;
}

5. 网格布局

在 CSS 网格布局中，该单元允许在网格轨道之间分配可用空间。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

这将创建三列轨道，每个轨道占用容器中可用空间的一部分。

6. 响应式图像

为图片设置max-width属性，当视口缩小时，图像将会响应式的缩小。

img {
  max-width: 100%;
}

7. 响应式设置字体大小

字体大小始终与视口大小相关，因此，我们可以

h1 {
  font-size: 6vw;
}

而执行上述操作的问题在于，用户无法缩放使用该单位设置的任何文本， 应在该单位在该缩放值之上添加：vw``em``rem``vw，使用户可以缩放

h1 {
  font-size: calc(1.5rem + 3vw);
}

总结

响应式设计是指响应查看它的环境的网站或应用程序设计。它包含许多CSS和HTML功能和技术，这里只是简单的概括了一部分内容，希望对大家能有帮助。