2021-09-13

读书笔记：响应式 Web 设计

书籍名称：

响应式 Web 设计- HTML 5 和 CSS 3 实战（第 2 版）

看一本响应式 Web 设计的书籍，顺手写一些笔记，为了保证阅读的速度和沉浸阅读的体验，还是随手记一些，对于内容完整性可能没有那么完整了。

第一章响应式 Web 设计基础

视口（ viewpoint ):浏览器中用于呈现网页的区域，通常并不等于屏幕大小。

<meta name="viewport" content="width=device-width" />

最小宽度媒体查询：

@media screen and (min-width: 50em) {
  /* 样式 */
}

第二章媒体查询

响应式网页相关的基本要素：弹性布局、弹性图片、媒体查询。

媒体查询相当于 CSS 中基本的条件逻辑。

可以将媒体查询应用于 link 标签之上：

<link
  rel="stylesheet"
  media="screen and (orientation: portrait)"
  href="portrait-screen.css"
/>

可以将媒体查询应用在 CSS 的 @import 之上：

@import url("phone.css") screen and (max-width: 360px);

但是 CSS 中的 @import 会增加 HTTP 请求，进而影响加载速度，所以需要慎重使用。

在 CSS 中使用媒体查询：

@media screen and (max-width: 400px) {
  h1 {
    color: green;
  }
}

多数情况下，可以省略 screen，不指定关键字的情况下默认关键字 all。

媒体查询属性：

width: 视口宽度。
height: 视口高度。
orientation: 设备方向是水平还是垂直。

第三章弹性布局与响应式图片

响应式 Web 设计核心技术：

将固定大小转换为比例大小
使用媒体查询相对于视口大小应用 CSS 规则。

既有布局技术概览：行内块、浮动、表格。

行内块（inline-block)：
- 会在 HTML 元素间渲染空白，一个解决方案是使用大小为零的 font-size。
- 不容易垂直居中。
- 无法做到两个相邻元素一个宽度固定，一个填充剩余空间。
浮动：
- 浮动元素宽度设定百分比，最终计算值在不同平台上结果不一样。
- 清除浮动才能避免父盒子/元素折叠。
表格和单元：
- display: table 和 display: table-cell 与对应的 HTML 元素不相关，只是模仿它的行为。
- 设置为 display: table-cell 的元素在设置为 display: table 的元素中垂直居中
- 兼容 IE 7 。

3.2 Flexbox 概述

Flexbox 的能力概括如下：

方便地垂直居中内容
改变元素的视觉次序
在盒子中自动插入空白以及对齐元素，自动对齐元素间空白

Flexbox 有 4 个关键特性：方向、对齐、次序和弹性。

3.3.1 完美垂直居中文本

display: flex 将当前元素设置为一个 Flexbox。
align-items: center 在 Flexbox 中沿着交叉轴对齐项目。
justify-content: center 内容沿着主轴居中。

3.3.2 偏移

在包含元素上设置 dispaly: flexbox 后，其子元素会变成弹性项（flex-item），从而在弹性模式下布局，配合 margin-left: auto 让最后一项用上左侧所有可用的外边距。

flex-direction:

row-reverse 让元素从右至左排列。
column 元素垂直排列。
column-reverse 元素垂直反序排列。

3.3.4 不同媒体查询中的不同 Flexbox 布局

可以使用媒体查询和 Flexbox 布局结合来达到导航栏在 PC 端横向布局，在移动端纵向布局的效果。

3.3.6 Flex 的对齐

align-items 交叉轴方向对齐

align-self 单个元素在交叉轴方向对齐，设置在子元素上

Flexbox 为交叉轴对齐提供如下值：

flex-start
flex-end
center
baseline ：沿着基线对齐
stretch ：让所有项沿着交叉轴拉伸到与父元素一样大

justify-content 主轴方向对齐

Flexbox 为主轴对齐提供如下值：

flex-start
flex-end
center
space-between 在元素之间填充空白
space-around 在元素之间和首尾填充空白

flex

建议使用 flex 的简写属性。

flex: 伸展收缩基准；

3.3.9 改变原始次序

在子元素中使用 order 属性可以改变在 flex 布局中的次序，其中 order 的值可以为负值。

响应式图片

开发者知道自己有哪些大小的图片，可以应用于不同分辨率的屏幕；浏览器知道用户的设备以及最合适的图片大小，问题是如何让两者融合。

3.4.3 srcset 及 sizes 联合切换

<img
  srcset="scones-small.jpg 450w, scones-medium.jpg 900w"
  sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw"
  src="sconessmall. jpg"
  alt="Scones"
/>

其中 w 表示当 <img> 的宽度规格达到多少时候，采用哪一张图片。

\[宽度规格 = sizes属性值 \times 屏幕密度\]

一篇普及屏幕密度的文章：Android 中的像素密度，屏幕密度，屏幕大小，分辨率，ldpi，mdpi，xhdpi，xxhdpi

一篇介绍响应式图片的文章：响应式图片 srcset 全新释义 sizes 属性 w 描述符

3.4.4 picture 元素

为不同的视口提供不同的图片：

<picture>
  <source media="(min-width: 30em)" srcset="cake-table.jpg" />
  <source media="(min-width: 60em)" srcset="cake-shop.jpg" />
  <img src="scones.jpg" alt="One way or another, you WILL get cake." />
</picture>

picture 只是一个容器，如果需要添加样式，需要给 picture 里面的图片本身添加样式。

这里的 img 标签是浏览器不支持 picture 元素，或者支持 picture 但没有合适媒体定义时的后备。

第四章 HTML 5 与响应式 Web 设计

4.2.1 doctype

HTML 文档的第一行是 doctype 声明：

<!DOCTYPE html>

doctype 的大小写是无所谓的，采用全部小写的方式同样可以。

之后 html 标签可以用 lang 属性来指定所使用的语言。

HTML 5 支持将多个元素放到一个 <a> 标签当中，但不能将另一个链接或者按钮嵌套着放进去。

4.9.1 使用 HTML 5 视频和音频

<video src="myVideo.mp4" width="640" height="480" controls autoplay>
  What, do you mean you don't understand HTML5?
</video>

controls 是使用浏览器默认的播放控件，autoplay 是要求视频自动播放，一般而言自动播放都会被关闭掉。

<video
  src="myVideo.mp4"
  width="640"
  height="480"
  controls
  autoplay
  preload="auto"
  loop
  poster="myVideoPoster.png"
>
  What, do you mean you don't understand HTML5?
</video>

preload 用于控制媒体的预加载(较早使用 HTML5 的读者要注意用 preload 替换 autobuffer )，loop 用于重复播放，还有 poster 用于设置视频的首屏图像。预加载对于缓存视频延迟很有用

如果需要，可以使用 <source> 标签在旧版本的浏览器中提供后备资源。比如，除了提供 MP4 版本的视频，如果想让 IE8 及更低版本的 IE 也能看到视频，可以添加一个 Flash 源作为后备。更进一步，如果用户浏览器没有任何播放条件，还可以提供一个下载视频的链接。

<video
  width="640"
  height="480"
  controls
  preload="auto"
  loop
  poster="myVideoPoster.png"
>
  <source src="video/myVideo.mp4" type="video/mp4" />
  <object
    width="640"
    height="480"
    type="application/x-shockwaveflash"
    data="myFlashVideo.SWF"
  >
    <param name="movie" value="myFlashVideo.swf" />
    <param
      name="flashvars"
      value="controlbar=over&amp;image=myVideoPoster.jpg&amp;file=myVideo.mp4"
    />
    <img
      src="myVideoPoster.png"
      width="640"
      height="480"
      alt="__TITLE__"
      title="No video playback capabilities, please download the
video below"
    />
  </object>
  <p><b>Download Video:</b> MP4 Format: <a href="myVideo.mp4">"MP4"</a></p>
</video>

4.10 响应式 HTML 5 视频与内嵌框架

本地服务器上存储的视频需要响应式非常简单，只需要添加 CSS 样式：

video {
  max-width: 100%;
  height: auto;
}

插入网页资源的视频 iframe 可以采用法国 CSS 大师 Thierry Koblentz 的技术。

响应式 - 使视频自适应于屏幕宽度

或者使用在线服务粘贴内嵌框架的 URL ，然后将得到的代码粘贴到自己的页面中。

在线工具

第五章 CSS 3 新特性

5.3 便捷的 CSS 技巧

文本多列显示可以设定列宽：

main {
  column-width: 12em;
}

此时改变视口的宽度会改变相应的列数。

也可以采用固定列数，可变宽度的方式：

main {
  column-count: 4;
}

还可以添加间距和分隔线：

main {
  column-gap: 2em;
  column-rule: thin dotted #999;
  column-width: 12em;
}

5.4 断字

word-wrap: break-word;

5.4.1 截短文本

.truncate {
  width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: no-wrap;
}

5.7 CSS 结构化伪类

:first-child 匹配列表中第一项的选择符
:last-child 匹配列表中最后一项的选择符
:only-child 专门针对只有一项的选择符
:only-of-type 唯一一个当前标签的选择符
:nth-child(odd) 选择奇数个
:nth-child(even) 选择偶数个
:nth-child(an + b)
:nth-of-type(an + b) 一个区分类别的版本，选中的样式必须是一个标记类型的，按照第一个选中的标记类型来走
:not 取反
:empty
:first-line 选择第一行，选择的目标根据视口大小不同而不同

5.9 CSS calc

在不知道屏幕大小的时候，可以通过 calc 函数来计算大小，例如：

.thing {
  width: calc(50% - 10px);
}

5.10.2 相对视口的长度

vw: 视口宽度
vh: 视口高度
vmin: 视口中的最小值
vmin: 视口中的最大值

第七章 SVG 与响应式 Web 设计

SVG 使用 XML 语言来描述。

7.2.1 SVG 的根元素

SVG 的根元素有 width、height 和 view 属性。

<svg width="198px" height="188px" viewBox="0 0 198 188" ...></svg>

viewBox 前两个值被称为 min-x 和 min-y，用于描述左上角的位置，接下来两个值被称为宽度和高度。

7.2.2 命名空间

xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"

这些命名空间往往只是在生成 SVG 的程序中使用，所以在 Web 页面上展示 SVG 的时候它们并不是必需的。因此在优化流程中，为了减小 SVG 的大小，通常会把它们去掉。

7.5 内联 SVG

<body>
  <svg
    display="none"
    width="0"
    height="0"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www. w3.org/1999/xlink"
  >
    <defs>
      <symbol id="icon-drag-left-right" viewBox="0 0 1344 1024">
        <title>drag-left-right</title>
        <path
          class="path1"
          d="M256 192v-160l-224 224 224
    224v-160h256v-128z"
        ></path>
        ...
      </symbol>
    </defs>
  </svg>
</body>

通过 defs 引入符号定义，symbol 元素定义一个形状以供使用时会用到。

之后如果想使用一个符号，可以这么写：

<svg class="icon-drag-left-right">
  <use xlink:href="#icon-drag-left-right"></use>
</svg>

7.5.3 复用外部图形的对象资源

<svg class="icon-drag-left-right">
  <use xlink:href="defs.svg#icon-drag-left-right"></use>
</svg>

链接到外部 SVG 文件，然后确定文件中想要使用的符号 ID。

7.6 不同插入方式下可以使用的功能

有四种主要方法可以插入 SVG :

通过 img 标签插入
通过 object 标签插入
设置为背景图像
内联

在使用 object 标签插入或者使用内联样式时，可以使用外部样式：

使用 link 标签引入

<link href="styles.css" type="text/css" rel="stylesheet" />

在 SVG 前引入：

<?xml-stylesheet href="styles.css" type="text/css"?>
<svg width="198" height="188" viewBox="0 0 198 188" xmlns="http://www. w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

7.8 使用 GreenSock 添加 SVG 动画

可以使用 JavaScript 动画库来制作 SVG 动画，作者在这里讲了一个用 GreenSock 做的小例子。

第八章 CSS 3 过渡、变形和动画

8.1 什么是 CSS 3 过渡以及如何使用它

在 CSS 中过渡属性应用到元素的初始状态而不是结束状态上。简言之，过渡声明是应该用在 from 状态上而不是 to 状态上。

8.1.1 过渡相关的属性

transition-property：要过渡的 CSS 属性的名字（如 background-color、text-shadow 或者 all ）。
transition-duration：定义过渡效果持续的时间长度，单位是秒。
transition-timing-function：定义过渡期间的速度变化，例如 ease、linear、ease-in、ease-out、ease-in-out 或者 cubic-bezier 。
transition-delay：可选，用于定义过渡开始前的延迟时间。相反，将其设置为一个负数，可以让过渡效果立即开始，但过渡旅程会在半路结束。同样是以秒为单位。

8.2 CSS 的 2D 变形

CSS 3 的 2D 变形模块允许我们使用下列变形：

scale：缩放元素。
translate：移动元素。
rotate：旋转元素。
skew：沿着 X 轴和 Y 轴对元素进行斜切。
matrix：允许以像素精度控制变形效果。
transform-origin：修改变形原点。