第二部分 精通布局

第四章 理解浮动

第四章到第八章是精通布局

三种改变文档流的方式：

浮动 flex 网格布局

此外还有定位

什么是浮动

将一个元素拉到网页某一侧，使得文档流能够包围它

用匿名 div 进行分组

先把网页大块布局写好然后写小块

双容器模式：把两个 div 套起来 设置最大宽度 设置内层容器外边距 使得内容居中

容器折叠和清除浮动

让 container 里面元素浮起来以后 container 折起来了

怎么会事捏

浮动元素的高度不会加到父元素 所以撑不起来（这样本意是段落不会包住图片 浮在整个文本里）

清除浮动

伪元素——一种特殊的选择器，可以选中文档的特定部分。伪元素以双冒号(::) 开头，大部分浏览器为了向后兼容也支持单冒号的形式。最常见的伪元素 是::before 和::after，用来向元素的开始或者结束位置插入内容。

浮动元素外边距不会折叠 非浮动元素外边距会自然折叠

浮动元素会尽可能靠上 因此如果每个元素高度不一致结果会非常抽象

解决方法： 消除每行第一个上面的浮动 然后给每个元素加上外边距

注意 这种方式需要确定每行几个元素 所以会变的情况不合适

媒体对象布局和BFC

==用BFC 实现媒体对象布局==

媒体对象是一种布局 belike 图像在左文字在右

盒子会包围浮动的图片

为了实现媒体对象布局 需要BFC（block formatting context）

BFC 里的内容不与外部影响

创建 BFC 的方式

给元素添加以下的任意属性值都会创建 BFC：

• float: left 或 right，不为 none 即可。
• overflow: hidden、auto 或 scroll，不为 visible 即可。
• display: inline-block、table-cell、table-caption、flex、inline-flex、grid 或 inline-grid。拥有这些属性的元素称为块级容器（block container）。
• position: absolute 或 fixed。

说明：网页的根元素也创建了一个顶级的 BFC。

所以直接设置overflow 就有用

*如果有时块级元素过宽就会换行 The Media Object Saves Hundreds of Lines of Code

网格系统

为了提高复用性，可以使用网格系统

网格系统的介绍

一种比较普遍的做法是借助网格系统提高代码的可复用性。网格系统提供了一系列的类名，可添加到标签中，将网页的一部分构造成行和列。它应该只给容器设置宽度和定位，不给网页提供视觉样式，比如颜色和边框。需要在每个容器内部添加新的元素来实现想要的视觉样式。

大部分流行的 CSS 框架 包含了自己的网格系统。它们的实现细节各不相同，但是设计思路相同：在一个行容器里放置一个或多个列容器。列容器的类决定每列的宽度。接下来构建一个网格系统，这样你就能掌握它的工作原理，进而应用到网页中。

12 列网格

用网格系统重构浮动布局

网格通过去掉所有列的top-margin 实现顶端对齐 加左右内边距实现空白间隔 但是这会导致和行外元素的略微不对齐 这可以通过行元素的负内边距解决

这样就是==浮动网格系统==

第五章 Flexbox

弹性盒子布局

flexbox 的原则

更好解决垂直居中，等高列等问题，更准确直观 缺点是属性比较多

dispaly: flex; 创建为弹性容器 子元素变成弹性子元素 默认同一行从左到右排列

弹性容器会填满宽度 像block 但是弹性子元素可不一定 弹性子元素高度相等

弹性元素的间距等

css 起手式

:root{
    box-sizing: border-box;
}

*,
::after,
::before{
    box-sizing: inherit;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

body * + *{
    margin-top: 1.5em;
}

.container{
    max-width: 1080px;
    margin: 0 auto;
}

a {

text-decoration: none;

}

浏览器前缀

.site-nav {
  display: -webkit-flex;
  display: flex;}

为了兼容

延伸：使用 Autoprefixer 来自动化

为了使得元素贡献的高度按照内边距而不是行高计算

需要把他们变成block 元素

相邻兄弟 * + * 加号意味着选中的元素前面必须有对象

在弹性盒子中，auto的margin会填充所有可用的空间
比如`margin-left: auto;`

创建菜单项的建议

如果你还不太熟悉构建这样的菜单（不管用 Flexbox 还是其他布局方式），那么请注意一下如何实现。在这个例子里，应当把菜单项内边距加到内部的 <a> 元素上，而不是 <li> 元素上。因为整个点击区域的外观和行为应当符合用户对一个菜单链接的预期，而对 <a> 元素，所以如果把 <li> 做成一个好看的大按钮，里面只有很小的区域（<a>）可以点击，就不符合用户预期。

弹性子元素大小

属性：flex

什么都不设置的话子元素宽度是自动适应 宽度可能有问题 可以用flex 属性调整

flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;

basis 相对于容器的百分比或者数值 基础宽度

grow 增长 使用余白 非 0 时填满容器宽度

flex 属性会自动给有用的数值 不是默认值

shrink 控制超过宽度时是否收缩

弹性方向

flex-direction

flexbox 应该能让左右两边高度相等 但是为什么有时候不起作用呢

因为有的盒子内部没有到那个高度 即使弹性盒子已经等高了

要让空出来的地方被元素撑满 弹性盒子可以套起来

表单样式

通常块级元素会自动占满整行，但是特殊情况要指定 width

对齐 间距 细节

这里的好像不是很常用

行高一般不带单位 不然继承的时候出问题 因为带单位继承计算值

创建弹性盒子的步骤

通常情况下，创建一个弹性盒子需要用到前面提及的这些方法：

• 选择一个容器及其子元素，给容器设置 display: flex
• 如有必要，给容器设置 flex-direction
• 给弹性子元素设置外边距和/或 flex 值，用来控制它们的大小

CTA call to action

没有值得写的内容

注意

只在必要的时候使用

Flexbugs 是的某些环境下会有 bug

flex 的容器大小是自动计算出来的

一行多列的设计可能渲染两次

全局设计建议网格 grid

第六章 网格布局 grid

首个真正的 css 布局系统 网格布局

浏览器实验特性->实验-应用 大多数浏览器支持网格布局

构建基础网格

构建 col 和 row fr 类似于 grow 也可以固定单位

gap 属性和书本不一样 垂直水平

网格区域可以被目标效果填充

设计不必填满每个单元格 在想留白的地方让单元格为空

网格布居中可以使用 flex

每个网格元素必须是网格容器 的子元素

*tips: 由外到内建构网页更简单

使用 repeat() 函数定义重复模式

用 repeat() 符号还可以定义不同的重复模式，例如 repeat(3, 2fr 1fr) 会重复三遍这个模式，从而定义六个网格轨道，重复的结果是 2fr 1fr 2fr 1fr 2fr 1fr。

子元素定位

网格线编号和元素定位

图 6-7 展示了网格线编号从左上角为 1 开始递增，负数则指向从右下角开始的位置。

可以在 grid-column 和 grid-row 属性中用网格线的编号指定网格元素的位置。如果想要一个网格元素在垂直方向上跨越 1 号网格线到 3 号网格线，就需要给元素设置 grid-column: 1 / 3。或者设置 grid-row: 3 / 5 让元素在水平方向上跨越 3 号网格线到 5 号网格线。这两个属性一起就能指定一个元素应该放置的网格区域。

这些属性实际上是简写属性：grid-column 是 grid-column-start 和 grid-column-end 的简写；grid-row 是 grid-row-start 和 grid-row-end 的简写。中间的斜线只在简写属性里用于区分两个值，斜线前后的空格不作要求。

span 会启动布局算法 自动分配放得下的第一个地方

与 flexbox 配合

flexbox本质是一维的 而grid本质是二维的

flex从内容切入 由内向外
gird网格从布局切入 由外向内

用网格给网页的主区域定位是因为我们希望内容能限制在它所在的网格内，但是对于网页上的其他元素，比如导航菜单，则允许内容对布局有更大的影响。也就是说，文字多的元素可以宽一些，文字少的元素则可以窄一些。同时这还是一个水平（一维）布局。因此，用 Flexbox 来处理。

site-nav {

    display: flex;

    background-color: #5f4b44;

    list-style-type: none;

    margin: 0;

    padding: 0.5em;

    border-radius: 0.2em;

}

.site-nav>li {

    margin-top: 0;

}

.site-nav>li>a {

    /* display block */

    display: block;

    color: white;

    text-decoration: none;

    background-color: #cc6b5a;

    padding: 0.5em 1em;

}

.site-nav>li+li {

    margin-left: 1.5em;

}

.site-nav .nav-right {

这里 flex 里面为什么先用父容器的 padding 这样更方便不用每个子元素 margin 去定上下 一下子全定好了

替代语法

• 命名的网格线
• 命名的网格区域

命名的网格线

grid-template-columns:[start] 2fr [center] 1fr [end]

[left-start] 2fr
[left-end right-start] 1fr  // same line
[right-end]

left 成为一个区域（有 start 和 end）

span 可以意指跨越几个轨道 比如 row 3 / span 2 从 row3 开始跨越两个轨道

命名的网格区域

*不用命名网格线

grid-template-areas: "title title"

                           "nav   nav"
                           "main  aside1"
                           "main  aside2";
 grid-template-columns: 2fr 1fr;
      grid-template-rows: repeat(4, auto);
      grid-gap: 1.5em;
      max-width: 1080px;

      margin: 0 auto;
    }

    header {
      grid-area: title;

}

用ASCII art画出网格 每个网格必须组成矩形

显式网格和隐式网格

有时不方便直接指定明确网格 尤其是来自数据库的时候

指定一个网格 多出来的自动创建轨道包含元素 默认大小 auto

grid-auto-row: 1fr;
grid-template-columns: repeat(auto, minmax(200px, 1fr));
auto-fill  vs auto-fit
minmax() // 非固定尺寸下设置下限 上限

grid网站

放大特定图片并维持网格好看

放大=占据更多的轨道

当不指定网格上元素的位置时，元素会按照布局算法自动放置。默认情况下，布局算法会按元素在标记中的顺序将其逐列逐行摆放。当一个元素无法在某一行容纳（也就是说该元素占据了太多网格轨道）时，算法会将它移动到下一行，寻找足够大的空间容纳它。在本例中，鸟被挪到了第二行，放在老鹰下面。

// 控制算法布局行为 row=优先排满一行 column=优先排满一列
dense=尽量填满空白

grid-auto-flow: dense;
grid-row: span 2; //指定网格项跨越两个行轨道。

子网格

网格有一个限制是要求用特定的 DOM 结构，也就是说，所有的网格元素必须是网格容器的直接子节点。因此，不能将深层嵌套的元素放在网格上对齐。

可以给网格元素加上 display: grid，在外层网格里创建一个内部网格，但是内部网格的元素不一定会跟外层网格的轨道对齐。一个网格里的子元素的大小也不能影响到另一个网格的网格轨道大小。

将来可以使用子网格（subgrid）来解决这个问题。通过给一个网格元素设置 display: subgrid，将其变成自己的内部网格容器，网格轨道跟外部网格的轨道对齐。不幸的是，这个特性还没有被任何浏览器实现，因此它被推迟到网格规范的 Level2 版本中。

这个特性备受期待，敬请关注。

底部对齐

刚才放大对齐后 顶部是对齐了但是底部没有 这是因为排列后较大元素里的 img可能没有占满全部网格

网格元素确实会自动占满网格轨道 但是网格元素里的子元素却不会 所以会出现多余的空白高度 简单解决 ： flexbox

flex-grow 可以强制拉伸 加上object-fit（fill contain cover）调整

flex: 1; // grow shrink basis
object-fit: 

特性查询

渐进增强概念：首先是所有浏览器支持的样式 然后是特殊的

使得支持 grid 的浏览器显示 grid

@support (display: grid){

在这里放特性code

}

// 先提供旧布局然后提供查询后的

对齐

justify-content 对于网格轨道
justify-items 对于所有元素
justify-self 对于单个元素
align~~

第七章 定位和层叠上下文

position 属性 默认静态 static=未被定位

定位的隐藏副作用：层叠上下文

固定定位

不太常用

position： fixed；
top
bott
right
left
决定 固定定位元素 和 浏览器视口边缘 的距离
隐式确定宽高 （等于视口总宽度 减去 两侧距离和）
也可以用height 和 width 指定

模态框 with 固定定位

display none -> block (js)

定位是脱离文档流的

技巧：

侧边导航栏 使得其他元素的容器

margin-right: 20%;

绝对定位

绝对定位非常重要 经常和 js 配合 来弹东西

不同于固定定位的包含块 是视口 绝对定位的包含块是 相对最近的祖先定位元素 同样属性可以决定距离/大小

绝对定位 伪元素

找到一个锚定的 定位元素 然后设置

那么这个相对于我们要定位的 定位元素 怎么决定呢：

通常情况下，就像本例一样，包含块是元素的父元素。如果父元素未被定位，那么浏览器会沿着 DOM 树往上找它的祖父、曾祖父，直到找到一个定位元素，用它作为包含块。

说明：
如果祖先元素都没有定位，那么绝对定位的元素会基于初始包含块（initial containing block）来定位。初始包含块跟视口一样大，固定在网页的顶部。

伪元素：将一个按钮改成 x

为了避免可读性出现问题 不能直接把按钮改成 x（因为这样会丢失按钮的文字意义）

办法：用 css 隐藏“close”并显示 x

总共需要两步。首先将按钮的文字挤到外面，并隐藏溢出内容。然后将按钮的 :: after 伪元素的 content 属性设置为 x，并让伪元素绝对定位到按钮中间。按照代码清单 7-4 更新按钮样式。(推荐 unicode)

主要是一个方框 里用 text-indent 推出去（会继承） 溢出后隐藏 然后定位一个乘法 unicode 到框里（用伪元素的内容）

设置行高要较小 太大会看不到

相对定位

相对定位被属性确定位置以后自己会动 但是不会影响其他元素 其他元素还是 围绕 被相对定位元素的 初始位置 跟随正常的文档流

跟固定或者绝对定位不一样，不能用 top、right、bottom 和 left 改变相对定位元素的大小。这些值只能让元素在上、下、左、右方向移动。可以用 top 或者 bottom，但它们不能一起用（bottom 会被忽略）。同理，可以用 left 或 right，但它们也不能一起用（right 会被忽略）。

常用：子绝父相 即为子元素的绝对定位创建一个包含块

创建一个下拉菜单

.dropdown-menu{
display: none; // 隐藏菜单
}

.dropdown:hover .dropdown-menu{
display: block;
}

inline-block显示使得元素仅占用必要长度

创建 css 三角形标识

创建下拉箭头引导用户

还是用伪元素来画

三角形是通过没有宽高(没有内容)只有边框粗细的元素来画的

更多画画技巧：

css tricks

层叠上下文 和 z-index

定位非常有用，但也需要弄清楚它会带来什么后果。当把一个元素从文档流中移除时，我们就需要管理之前由文档流处理的所有事情了。

首先要确保元素不会不小心跑到浏览器视口之外，导致用户会看不到元素。其次要保证元素不会不小心挡住重要内容。

最后还有层叠的问题。在同一页面定位多个元素时，可能会遇到两个不同定位的元素重叠的现象。有时我们会发现“错误”的元素出现在其他元素之前。事实上，本章已经故意设置了这样。

DOM 树 渲染树 -决定绘制元素顺序 后面的元素渲染出现在前面的之前

注意：定位元素会被放到前面

通常情况下 ==模态框要放到最后==

用 z-index 控制层叠

数字越大越靠近屏幕前面

理解层叠上下文

一个层叠上下文包含一个元素或者由浏览器一起绘制的一组元素。其中一个元素会作为层叠上下文的根，比如给一个定位元素加上 z-index 的时候，它就变成了一个新的层叠上下文的根。所有后代元素就是这个层叠上下文的一部分。

层叠上下文之外的元素 无法 叠放到层叠上下文中的两个元素之间

给一个定位元素加上 z-index 是创建层叠上下文最主要的方式，但还有别的属性也能创建，比如小于 1 的 opacity 属性，还有 transform、filter 属性。由于这些属性主要会影响元素及其子元素渲染的方式，因此一起绘制父子元素。文档根节点 html也会给整个页面创建一个顶级的层叠上下文。

在支持的地方可以使用变量记录 z-index

如果发现 z-index 不对劲就要去找根 然后把根放起来

定位用的越多网页就越复杂

粘性定位

比如说侧边栏导航 相对定位和固定定位的结合 再往下滑的时候固定位置

用 canIUse 确认是否支持

条件和前提

1. 包含块必须有一个特定的高度：

• 粘性定位元素的包含块（父元素）必须有一个确定的高度或宽度，以便计算粘性定位的生效范围。否则，粘性定位将无法生效。

2. 必须指定粘性偏移值：

• 必须指定至少一个粘性偏移值（top、right、bottom 或 left），否则 position: sticky; 不会生效。

3. 父元素不能有**overflow: hidden**：

• 如果粘性定位元素的父元素设置了 overflow: hidden;，那么粘性定位可能会失效。

• 可能将 position 的定位功能与 display 的布局功能混淆

• position 影响元素在页面上的具体位置，而 display 影响元素如何在文档流中呈现和排列。

第八章 响应式设计

如果将移动版和桌面版强制分开 无法应对各种类型的屏幕

本章概要

• 基于多种设备和屏幕尺寸构建网页
• 使用媒体查询，根据视口大小来改变设计
• 采用“移动优先”的方式
• 响应式图片

移动优先

移动端 hover 很难生效

创建一个网站，在任何设备都能运行 = 响应式设计

响应式设计三原则：

• 移动优先 = 首先实现移动端布局 ； 随后渐进增强
• @media 规则 = 为不同视口设置不同布局 断点
• 流式布局 = 允许容器根据视口缩放尺寸

隐藏菜单=汉堡包图标

移动端设计主要关注内容=目标 重要的内容先出现

实现移动优先设计

因为要先实现移动版设计，所以更应该了解在更大的视口下网页长什么样，这样才能在一开始就写出合适的 HTML 结构。新建一个网页和样式表，给页面添加样式表，同时给 HTML 的结构添加适应不同视口的内容。

基础字号缩放

font-size: calc(1vw+0.6em);

text-shadow: 上 下 模糊程度 颜色;

background-image: url();

创建移动版的菜单

可读性 nav 里面要有东西 不然视力有障碍的人无法判断页面主要内容

nav容器作为兄弟元素出现在header后面；
不寻常：使用绝对定位把菜单切换按钮拉到上面
white-space: nowrap; 该属性值会使元素内的所有空白符（包括空格、换行符、制表符等）被保留，但文本会在一行内显示，而不会自动换行。

//显示的元素一般都块级 换行 设置大小和边距
.menu{
    position: relative;
}

.menu-toggle{
    position: absolute;
    top: -1.2em;
    right: 0.1em;

    border: 0;
    background-color: transparent;

    height: 1em;
    width: 1em;
    font-size: 3em;
    /* line-heigh with no 单位 */
    line-height: 0.4;
    /* 缩进会继承 */
    text-indent: 5em;
    /* 显示空白但不换行 在一行内 */
    white-space: nowrap;
    overflow: hidden;
}

.menu-toggle::after{
    position: absolute;
    top: 0.2em;
    left: 0.2em;
    display: block;
    content: "\2261";
    /* 缩进会继承所以要重新清除 */
    text-indent: 0;

}

.menu-dropdown{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

js负责改变一个类 css负责隐藏或者显示
.menu.is-open .menu-dropdown {
    display: block;
}

你的理解基本是正确的，内外边距属性用于布局控制，定位属性用于精确位置控制。通过结合使用这些属性，可以实现复杂且灵活的页面布局。

给视口添加 meta 标签

现在移动版设计已经完成，但是还差一个重要细节：视口的 meta 标签。这个 HTML 标签告诉移动设备，你已经特意将网页适配了小屏设备。如果不加这个标签，移动浏览器会假定网页不是响应式的，并且会尝试模拟桌面浏览器，那之前的移动端设计就白做了。为了避免这种情况，按照代码清单 8-6 更新 HTML 里的 head，将 meta 标签包含进去。

<head>
    <meta charset="UTF-8">
    // 告诉浏览器适配了移动端 要用视口
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./respStyles.css">
    <title>responsive</title>
</head>

meta 标签的 content 属性

meta 标签的 content 属性里包含两个选项。首先，它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度，而不是一个全屏的桌面浏览器的宽度。其次，当页面加载时，它使用 initial-scale 将缩放比例设置为 100%。

content 属性的第三个选项

此外，content 属性还有第三个选项 user-scalable=no，阻止用户在移动设备上用两个手指缩放。通常这个设置在实践中并不友好，不推荐使用。当链接太小不好点击，或者用户想要把某个图片看得更清楚时，这个设置会阻止他们缩放页面。

提示

现代浏览器的开发者工具提供了模拟移动浏览器的功能，包括较小的视口尺寸和视口 meta 标签的行为。这些工具能帮助我们测试响应式设计。更多信息请参考以下链接：

• Chrome 开发者工具
• Firefox 响应式设计模式

媒体查询

针对小中大屏幕设计样式

媒体查询的优先级

媒体查询里面的规则仍然遵循常规的层叠顺序。它们可以覆盖媒体查询外部的样式规则（根据选择器的优先级或者源码顺序），同理，也可能被其他样式覆盖。媒体查询本身不会影响到它里面选择器的优先级。

==推荐查询单位使用 em==

查询的临界情况称为断点

媒体查询的类型

联合媒体查询

必须都满足
@media () and (){}

满足一个
@media () , () , (){}

教材 p209

媒体特征

比如说宽高；宽高之间关系等

提示

媒体查询还可以放在 <link> 标签中。在网页里加入 <link rel="stylesheet" media="(min-width: 45em)" href="large-screen.css" />，只有当 min-width 媒体查询条件满足的时候才会将 large-screen.css 文件的样式应用到页面。然而不管视口宽度如何，样式表都会被下载。这种方式只是为了更好地组织代码，并不会节省网络流量。

媒体类型

常见：screen 和 print 不需要加括号

@media print{}

@media screen{}

@media print { 

    *{
        color: black !important;

        background: none !important;
      }

}

给网页添加断点

移动优先的开发方式

通常来说，移动优先的开发方式意味着最常用的媒体查询类型应该是 min-width。在任何媒体查询之前，最先写的是移动端样式，然后设置越来越大的断点。

添加响应式的列

为更大的屏幕引入多列布局

响应式设计的方法

许多响应式设计遵循这种方法：当设计要求元素并排摆放时，只在大屏上将它们摆放在一行。在小屏下，允许每个元素单独一行，填满屏幕宽度。这种方法适用于列、媒体对象，以及任意在小屏下容易拥挤的元素。

你可能会好奇为什么在代码清单 8-7 中要将断点设置为 35em，因为在这个宽度时，三列布局就开始显得拥挤了。本例中小于 35em 时，每列就显得太窄了。

各种响应模式

断点的选择

不要根据设备选择

未来可能实现根据 容器 选择

流式布局 fluid layout

定义：使用的容器随着视口大小变化而变化

与固定布局相反 固定：px em 等

流式布局中的容器宽度

在流式布局中，页面容器通常不会有明确宽度，也不会给百分比宽度，但可能会设置左右内边距，或者设置左右外边距为 auto，让其与视口边缘之间产生留白。也就是说容器可能比视口略窄，但永远不会比视口宽。

主容器中的列宽度定义

在主容器中，任何列都用百分比来定义宽度（比如，主列宽 70%，侧栏宽 30%）。这样无论屏幕宽度是多少都能放得下主容器。用 Flexbox 布局也可以，设置弹性元素的 flex-grow 和 flex-shrink（更重要），让元素能够始终填满屏幕。要习惯将容器宽度设置为百分比，而不是任何固定的值。

容器用内边距（用对里面内容的内边距 而不是最外层容器的外边距）有时候外边距会被吃掉什么的

内容用百分比

给大视口添加样式

:root {
      box-sizing: border-box;
      font-size: calc(1vw + 0.6em);

}

    @media (min-width: 50em) {
      :root {

        font-size: 1.125em;
      }

}

设置最大字体上限

处理表格

多列表格可能超过屏幕宽度 被剪裁

小屏将表格全都变成 block

  table {
      width: 100%;

}

@media (max-width: 30em) {
  table, thead, tbody, tr, th, td {

    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;

}

  tr {
    margin-bottom: 1em;

  }
}

响应式图片

为了带宽和访问速度

响应式设计中的图片优化

在响应式设计中，图片需要特别关注。不仅要让图片适应屏幕，还要考虑移动端用户的带宽限制。图片通常是网页上最大的资源。首先要保证图片充分压缩。在图片编辑器中选择“Save for Web”选项能够极大地减小图片体积，或者用别的图片压缩工具压缩图片，比如 tinypng 网站。还要避免不必要的高分辨率图片，而是根据视口大小决定是否必要提供大图，也没有必要为小屏幕提供大图，因为大图最终会被缩小。

不同视口 不同图片

提供不同分辨率的图片
下面分别给设备提供小，中，大图

   .hero {
      padding: 2em 1em;
      text-align: center;
      background-image: url(coffee-beans-small.jpg);
      background-size: 100%;
      color: #fff;
      text-shadow: 0.1em 0.1em 0.3em #000;

}
@media (min-width: 35em) {
  .hero {

    padding: 5em 3em;
    font-size: 1.2rem;
    background-image: url(coffee-beans-medium.jpg);

} }

@media (min-width: 50em) {
  .hero {

    padding: 7em 6em;

    background-image: url(coffee-beans.jpg);
  }

}

使用 srcset

针对 html 的 img 标签

    <img alt="A white coffee mug on a bed of coffee beans"
         src="coffee-beans-small.jpg"

srcset="coffee-beans-small.jpg 560w,
                 coffee-beans-medium.jpg 800w,

                 coffee-beans.jpg 1280w"

/>

jakearchibald 有关响应式图片

不要忘记给网页添加meta标签

大型应用程序中的 CSS
在组织中编写易于维护的代码