相对大小
max-width:100%
对于笔记本电脑或者台式机屏幕这样的设备，不要假设窗口尺寸和屏幕尺寸相同。
也不在假设窗口会一直保持相同大小
Max-width 可以设置在屏幕上100%显示，在电脑上最大显示是图片原来的大小。
display: flex;
使用display:flex ,里面的Div 不需要float:left, Div会自动向左浮动
Width:calc((100%-10px)/2)
简单的计算CSS 值, 【100%宽度下2张图片，10px边框】
Last-of-type
img:Last-of-type{margin-right:0}
最后一张图片没有右边距
练习：https://udacity.github.io/responsive-images/examples/1-08/imageRelativeWidth/index-quiz.html
横向和纵向
CSS单位
VH （view hight的缩写）
1VH = 1% 1
00VH = 100%
VW （view width的缩写）
[Vmin,vmax仅用于正文形图片]
Vmin： 1%的高度or 宽度，都是最小的
Vmax： 最大的
width:100vmax; height:100vmax ， 图片会响应式铺满整个视图区域
栅格和矢量
文件格式 （view hight的缩写）
Paster : png \ img \ Webp
Vector: svg
压缩、优化和自动化
https://classroom.udacity.com/courses/ud882/lessons/3520939843/concepts/35820386070923#
图片处理工具：
ImageOptim (Mac) https://imageoptim.com/mac
Trimage - 和 ImageOptim 类似 (Windows, Mac, Linux) https://trimage.org/
ImageAlpha https://github.com/pornel/ImageAlpha
图片压缩工具：
市面上有许多工具可用来对JPEG和PNG文件执行进一步的无损压缩，且不会对图片质量造成任何影响。
对于JPEG文件，我们建议您使用jpegtran或jpegoptim（仅适用于Linux；使用--strip-all选项运行）。
对于PNG文件，我们建议使用OptiPNG或PNGOUT。
标记图片
CSS背景图片技艺
background-size：cover 把背景图像扩展至足够大，以使完全覆盖背景区域。某些部分也许无法显示在背景定位区域中。
background-size：contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
符号字符 https://udacity.github.io/responsive-images/examples/2-08/unicodeStar
例子：Unicode 代替图片
Unicode 字符集
Unicode 符号集合
图标字体的一些网站
http://weloveiconfonts.com/
https://css-tricks.com/examples/IconFont/
http://fontawesome.io/
9、SVG和数据 date rul行内图片
Date rul 提供了一种将文件，例如图片 内嵌为 base64 编码的字符串，
SVG 和数据 URI 行内图片
例子：
SVG Data URI in HTML
SVG Data URI in CSS
SVG text on a path
SVG optimized and unoptimized
行内 SVG 浏览器支持
数据 URI 浏览器支持
SVG 优化工具
Trajan 的 Column SVG 例子
20 个让你惊艳不已的 SVG 例子
SVG 动画示例
4 完全响应式
响应屏幕功能和视图
source set 中 W 功能
size="50vw" = 50%
transition:width 0.5s; 图片转换时的过渡
500w 是为了告诉浏览器图片的宽度，让它下载图片之前就知道哪个最合适。
一篇关于 srcset 的有趣文章
设备像素密度列表
关于像素密度的更多信息
Working with h units
Wikipedia wallabies
图片元素
为浏览器提供可选择元素，第一个可行就用第一个，否则下一个
光猪六壮士
示例：
Picture element: art direction
Picture element: with srcset and media queries
Picturefill polyfill