相對(duì)大小
max-width:100%
對(duì)于筆記本電腦或者臺(tái)式機(jī)屏幕這樣的設(shè)備，不要假設(shè)窗口尺寸和屏幕尺寸相同。
也不在假設(shè)窗口會(huì)一直保持相同大小
Max-width 可以設(shè)置在屏幕上100%顯示，在電腦上最大顯示是圖片原來(lái)的大小。
display: flex;
使用display:flex ,里面的Div 不需要float:left, Div會(huì)自動(dòng)向左浮動(dòng)
Width:calc((100%-10px)/2)
簡(jiǎn)單的計(jì)算CSS 值, 【100%寬度下2張圖片，10px邊框】
Last-of-type
img:Last-of-type{margin-right:0}
最后一張圖片沒(méi)有右邊距
練習(xí)：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 ， 圖片會(huì)響應(yīng)式鋪滿整個(gè)視圖區(qū)域
柵格和矢量
文件格式 （view hight的縮寫）
Paster : png \ img \ Webp
Vector: svg
壓縮、優(yōu)化和自動(dòng)化
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
圖片壓縮工具：
市面上有許多工具可用來(lái)對(duì)JPEG和PNG文件執(zhí)行進(jìn)一步的無(wú)損壓縮，且不會(huì)對(duì)圖片質(zhì)量造成任何影響。
對(duì)于JPEG文件，我們建議您使用jpegtran或jpegoptim（僅適用于Linux；使用--strip-all選項(xiàng)運(yùn)行）。
對(duì)于PNG文件，我們建議使用OptiPNG或PNGOUT。
標(biāo)記圖片
CSS背景圖片技藝
background-size：cover 把背景圖像擴(kuò)展至足夠大，以使完全覆蓋背景區(qū)域。某些部分也許無(wú)法顯示在背景定位區(qū)域中。
background-size：contain 把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
符號(hào)字符 https://udacity.github.io/responsive-images/examples/2-08/unicodeStar
例子：Unicode 代替圖片
Unicode 字符集
Unicode 符號(hào)集合
圖標(biāo)字體的一些網(wǎng)站
http://weloveiconfonts.com/
https://css-tricks.com/examples/IconFont/
http://fontawesome.io/
9、SVG和數(shù)據(jù) date rul行內(nèi)圖片
Date rul 提供了一種將文件，例如圖片 內(nèi)嵌為 base64 編碼的字符串，
SVG 和數(shù)據(jù) URI 行內(nèi)圖片
例子：
SVG Data URI in HTML
SVG Data URI in CSS
SVG text on a path
SVG optimized and unoptimized
行內(nèi) SVG 瀏覽器支持
數(shù)據(jù) URI 瀏覽器支持
SVG 優(yōu)化工具
Trajan 的 Column SVG 例子
20 個(gè)讓你驚艷不已的 SVG 例子
SVG 動(dòng)畫示例
4 完全響應(yīng)式
響應(yīng)屏幕功能和視圖
source set 中 W 功能
size="50vw" = 50%
transition:width 0.5s; 圖片轉(zhuǎn)換時(shí)的過(guò)渡
500w 是為了告訴瀏覽器圖片的寬度，讓它下載圖片之前就知道哪個(gè)最合適。
一篇關(guān)于 srcset 的有趣文章
設(shè)備像素密度列表
關(guān)于像素密度的更多信息
Working with h units
Wikipedia wallabies
圖片元素
<picture>
<source srcset="kittens.webp" type="image/webp">
<source srcset="kittens.jpg" type="image/jpeg">
</picture>
為瀏覽器提供可選擇元素，第一個(gè)可行就用第一個(gè)，否則下一個(gè)
光豬六壯士
示例：
Picture element: art direction
Picture element: with srcset and media queries
Picturefill polyfill
