这一章以概念为主，主要为摘录

多列布局

三列布局

1
2
3
.container {
  column-count: 3;
}

创建的这些列具有弹性的宽度 — 由浏览器计算出每一列分配多少空间。

设置列宽

1
2
3
.container {
  column-width: 200px;
}

浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。

给多列增加样式

  • 使用 column-gap 改变列间间隙。
  • 用 column-rule 在列间加入一条分割线。
    • 分割线本身并不占用宽度。它置于用 column-gap 创建的间隙内。

列与内容折断

多列布局的内容被拆成碎块。和多页媒体上的内容表现大致一样 — 比如打印网页的时候。当你把内容放入多列布局容器内，内容被拆成碎块放进列中，内容折断（译者注：比如断词断句）使得这一效果可以实现。

image-20221024114328994

设置 break-inside

控制 multicol 和多页媒体中的内容拆分、折断。

如：规定box不会被拆分、折断。

image-20221024114517707

响应式设计

用于适配不同尺寸的屏幕

历史上的网站布局

  • 你可以创建一个“液态”站点，它会拉伸以充满整个浏览器视窗；
    • 缺点：液态站点导致了小屏幕上的设计会挤成一团（如下所示），以及大屏幕上难以阅读的很长的行长度。
  • 或者是一个“固定宽度”站点，它有一个以像素计的固定尺寸。
    • 缺点：在比站点更窄的屏幕上会出现一个水平滚动条（如下所示），在大屏幕上的设计边缘还会有许多空白。

响应式设计之前的灵活布局

响应式设计

响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。

媒介查询

响应式设计仅仅是因为媒介查询才新兴起来的。

媒介查询允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将 CSS 选择性地适应用户的需要应用在样式化页面上。

灵活网格

响应式站点不只是在断点之间改变它们的布局，它们是建立在灵活网格上的。一个灵活网格意味着你不需要适配每个可能使用的设备尺寸，然后为其建立一个精确到像素级的适配布局

现代布局技术

现代布局方式，例如多栏布局、伸缩盒和网格默认是响应式的。

它们都假设你在尽力创建一个可伸缩网格，而且给了你更容易这样做的方式。

伸缩盒

在伸缩盒中，初始的行为是，弹性的物件将参照容器里面的空间的大小，缩小和分布物件之间的空间。通过更改flex-grow和 flex-shrink的值，你可以指示在物件遇到周围有更多或者更少的空间的情况下，你所期望的物件表现。

CSS 网格

在 CSS 网格布局中，fr单位许可了跨网格轨道可用空间的分布。

备注： 网格布局版本的代码要更简单，因为我们可以在.wrapper 上定义列

响应式图像

最简单的处理响应式图像的方式是在 Marcotte 的早年的关于响应式设计的文章上所描述的那样。基本来说，你可以用一张有着所需最大尺寸的图像。然后缩放它。

1
2
3
img {
  max-width: 100%:
}

弊端

  • 图像有可能会显示得比它的原始尺寸小很多，以至于浪费带宽——一个移动端用户会下载几倍于他们在浏览器窗口中实际看到的大小的图像
  • 你可能不想在移动端和桌面端有相同的图像宽高比例
  • 认识到移动端更小尺寸的图像的你也许会希望同时展示一张不同的图像，一张在小一点的屏幕上更容易理解的图像，这些东西不能简单通过缩放图像解决。

解决

  • 响应式图像，使用了<picture>元素和<img> srcset和sizes 特性，解决了这两个问题。你可以提供附带着“提示”（描述图像最适合的屏幕尺寸和分辨率的元数据）的多种尺寸，浏览器将会选择对设备最合适的图像，以确保用户下载尺寸适合他们使用的设备的图像。
  • 响应式图片指南

响应式排版

使用视口单位实现响应式排版

一个有趣的方式是使用视口单位vw来实现响应式排版。1vw等同于视口宽度的百分之一，即如果你用vw来设定字体大小的话，字体的大小将总是随视口的大小进行改变。

1
2
3
h1 {
  font-size: 6vw;
}

问题在于，当做上面的事情的时候，因为文本总是随着视口的大小改变大小，用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用 viewport 单位设定文本。

这里有一个解决方法，它使用了calc()，如果你将vw单位加到了使用固定大小（例如em或者rem）的值组，那么文本仍然是可放缩的。基本来说，是vw加在了放缩后的值上。

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

这就是说，我们只需要指定标题的字体大小一次，而不是为移动端设定它，然后再在媒介查询中重新定义它。字体会在你增加视口大小的时候逐渐增大。

视口元标签

如果你看看一张响应式页面的 HTML 源代码，你通常将会在文档的<head>看到下面的<meta>标签。

1
<meta name="viewport" content="width=device-width,initial-scale=1">

这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%，在移动端以你所希望的为移动优化的大小展示文档。

为何需要这个？因为移动端浏览器倾向于在它们的视口宽度上说谎。

原因

这个元标签的存在，是由于原来 iPhone 发布以后，人们开始在小的手机屏幕上阅览网页，而大多数站点未对移动端做优化的缘故。移动端浏览器因此会把视口宽度设为 960 像素，并以这个宽度渲染页面，结果展示的是桌面布局的缩放版本。其他的移动端浏览器（例如谷歌安卓上的）也是这么做的。用户可以在站点中放大、移动，查看他们感兴趣的那部分，但是这看起来很不舒服。如果你不幸遇到了一个没有响应式设计的网站，今天你还会看到这种情况。

所以你应该在你的文档头部*总是*包含上面那行 HTML。

和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。

  • initial-scale：设定了页面的初始缩放，我们设定为 1。
  • height：特别为视口设定一个高度。
  • minimum-scale：设定最小缩放级别。
  • maximum-scale：设定最大缩放级别。
  • user-scalable：如果设为no的话阻止缩放。

备注： 有一个 CSS @规则是被设计用来替换掉视口元标签的——@viewport——但是浏览器对它的支持太差了。它是在 IE 和 Edge 中引入的，但自从 Chromium 内核的 Edge 发布以后，它就不再受到 Edge 浏览器支持了。

小结

响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多 CSS 和 HTML 的功能和技术，现在基本上就是我们默认建设网站的方式。想一下你在手机上访问的网站，遇到一个缩放的桌面版网站，或者你需要向侧边滚动来寻找东西的网站可能是相当不寻常的。这是因为 Web 已经迁移到了这种响应式设计的方式上。

在这些课里学到的布局方式的帮助下，实现响应式设计也变得愈加简单。如果你今天新近了解 Web 开发，那么你与响应式设计早期相比，手边有多得多的工具。因而，你有必要检查下你所引用的任何材料的年纪。尽管历史上的文章仍然有用，现代的 CSS 和 HTML 的使用让创建一个优雅且实用的设计变得远远更加容易，且无论你的访客使用什么设备浏览网站。

媒体查询入门指南

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用

媒体查询语法

1
2
3
@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

部分组成：

  • media-type：一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
  • media-feature-rule：一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；
  • 一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。

media-type

你可以指定的媒体类型为：

  • all
  • print
    • 打印
  • screen
  • speech

备注：

  • 这里的媒体类型是和所谓的MIME type不同的东西。
  • 在第三级媒体查询规范中，定义了其他一些媒体类型，它们已经不被建议使用，而且应该被避免使用。
  • 媒体类型是可选的，如果你没有在媒体查询中指示一个媒体类型的话，那么媒体查询默认会设为用于全部媒体类型all。