第一章、响应式web设计基础
1.什么是响应式web设计
1)响应式web设计，就是网页内容会随着访问它的视口及设备的不同呈现不同的样式。
视口:用于呈现网页的区域，视口的大小通常不等于屏幕大小，特别是在浏览器窗口缩放的情况下。
2.浏览器支持
关于IE8及以下版本几乎没有什么可利用资源，所以放弃那些"残疾"浏览器把资源主要放在支持现代浏览器和现代平台才是最明智的。
我们也可以通过 http://caniuse.com 查询浏览器支持什么特性
3.视口meta标签的重要意义
<meta name="viewport" content="width=device-width">
<meta> 标签它告诉浏览器怎么渲染网页并按照设备宽度(device-width)来渲染网页内容
4.怎么让图片窗口缩放
width与max-width
1)width:如果给width设定值图片会按照该值显示，不考虑自身固有宽度。这样会导致它显示的跟它的容器一样宽，在容器比图片宽的情况下，图片会被无谓的拉伸
2）max-width:保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大），如果包含图片的元素比图片固有宽度小，图片会缩放占满最大可用空间。
第二章、媒体查询
1.为什么响应式web设计需要媒体查询
css3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的css样式。使用媒体查询，不必修改内容本身，而让网页适配不同的设备比如屏幕方向水平或垂直、视口或大或小，等等。
1.1 css中基本的条件逻辑
真正的编程语言都有相应的语言构造处理一个或多个条件分支。这时候通常指的就是条件逻辑，比如 if/else 语句。这些都在css预处理器(Sass)中体现。
媒体查询具有css中实现条件逻辑的能力。使用媒体查询，其中的样式只在某些条件具备的情况下才会被应用
2.媒体查询语法
@media screen and (min-width:960px){
body{
...
}
}
3.如何使用媒体查询
1.在link标签中使用媒体查询
<link rel="stylesheet" media="sceen and (orientation：portrait)" href="style.css">这句话可以想象为对浏览器的询问，如询问了设备的类型(是屏幕吗?)然后又询问特性(你的屏幕是垂直方向吗？)。显然样式表会应用满足这两者条件下的设备，若不满足则不会获取样式。
1.1使用组合多个媒体查询
<link rel="stylesheet" media="sceen and (min-width:800px),projection" href="style.css">
使用逗号分隔每个媒体查询表达式。其次，projection(投影机)之后没有任何特性/值对。表示适用于任何投影机。
2.@import使用媒体查询
@imort url（"phone.css'）screen and (max-width:360px);
请慎用！！css中使用@import 会增加http请求(进而影响加载速度)
3.css中使用媒体查询
比较常见的是在css文件内部直接使用媒体查询。
@media sceen and （查询条件）{
}
如果不定关键字，则关键字就是all（规范中这么说）因此，除非你真的想针对特定的媒体类型应用样式，否则就不要写screen and 了。
4.应该把媒体查询写在哪?
看个人喜好，有的人喜好将媒体查询写在需要的它的地方（例一）,有的喜欢将它写在一起(例2)。不过从代码维护角度看，例二不利于维护。可能有的人会说例一种不是会造成冗余，是的没错。不过实际上gzip压缩(应该用它压缩服务器上的所有压缩的资源)完全可以把差别降到忽略不计的程度。
例一、
.thing{
width:50%;
}
@media (min-width:30rem){
.thing{
width:75%;
}
}
.thing2{
width:65%;
}
@media (min-width:30rem){
.thing2{
width:75%;
}
例二、
.thing{
width:50%;
}
.thing2{
width:65%;
}
@media (min-width:30rem){
.thing{
width:75%;
}
.thing2{
width:75%;
}
}
6.小结
媒体查询只能实现可适配的web设计，即从一种布局到另一种布局的切换。为了实现最终的目标，还必须利于流式布局,以便设计可以在不同断点之间或媒体查询处理范围外弹性适应。
第三章、弹性布局应与响应式图片
1.将固定像素大小转换为比例大小
转化公式: 目标/上下文
如果你要布局的宽度为960px,左侧边栏宽度为200px,左边边栏宽度为100px,那么中间区块的宽度是660px,我们的目标是把左中右区块由固定像素转化为比例大小。
左边栏宽度为200单位(目标),用960单位(上下文)来除结果是 0.208333333.转化成百分数 即20.8333333%，后面的以此类推。
** 比例值的小数点后面的值尽量不要去省略，这样有助于将来的计算精确(比如嵌套元素更精确的计算)。
2.已有css布局机制及其不足之处
1.行内块与空白
行内块布局最大的问题，就是会在html元素间渲染空白。
关于取消空白方法 可以参照
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
2.浮动
1.如果给浮动元素的宽度设定百分数，那么最终计算值在不同平台上的结果不同(浏览器取整的策略不同).
2.浮动设置完后,都要清除浮动，才能避免父盒子/元素的折叠.
3.表格与表元
1.需要在每个项目外面包一层(要想完美地垂直居中，表元必须包在一个表格元素中).
3.理解Flexible Box Layout Module 及其优点
3.Flexbox
1.方便垂直居中内容
2.改变元素的视觉次序
3.在盒子里插入空白以及元素，自动对齐元素间空白
4.支持IE9及以上版本
4.Flexbox的对齐
1.align-items
在交叉轴上定位元素。让被包装元素垂直居中。
2.align-self
让某一个元素按照不同的方式对齐。
3.交叉轴的对齐
1.flex-start：可以让元素从Flexbox父元素的起始边开始。
2.flex-end：沿Flexbox父元素的末尾对齐该元素。
3.center：把元素放在Flexbox元素的中间
4.baseline：让Flexbox元素中的所有项沿基线对齐
5.stretch:让flexbox的所有项拉伸至父元素一样大
4.justify-content
控制flexbox主轴对齐的属性。
1.flex-start
2.flex-end
3.center
4.space-between
告诉浏览器在子元素之间添加相同宽度的空白
5.space-around
告诉浏览器在他们两边各添加相同宽度的空白
4.实现分辨率切换以及响应式图片的正确方法
1.通过srcset切换分辨率
<img src="scones_smell.jpg" srcset="scones_medium.jpg 1.5x,scones_large.jpg 2x" alt="Scones taste amazing">
src属性有两个角色。一是指定1倍大小的图片，二是在不支持srcset属性的浏览器中作后备。
对于支持srcset属性的浏览器，通过逗号分隔的图片描述，让浏览器自己决定选择哪一个。 图片描述首先是图片名(如 scones_medium.jpg)，然后是一个分辨率说明。
不过有个问题，1440像素宽 1x的屏幕会拿到跟480像素宽，3x的屏幕相同的照片。
第四章、html5与响应式web设计
<!doctype html>
<html lang="en">
<head>
<meta charset="uft-8">
1.浏览器对Html5的支持情况
所有现代的浏览器都理解HTML5中新的语义元素(新的结构化元素、视频和音频标签)，IE9以下版本都可以通过引入脚本正确渲染这些元素。
2.新的语义元素
语义就是赋予标记含义。
<main>:放页面的主要内容
<section>:用于定义文档或应用中一个通用的区块
<nav>:包装导航链接
<article>:包含一个独立的内容块
<aside>：用于包含与其旁边内容不相关的内容。基本任何与主内容无直接关系的，都可以放在这里边。
<figure>和<figcaption>：figure可以包含 注解、图片、代码等等。
例如:
<figure class="MoneyShot">
<img class="MoneyShotImg"src="img/scones.jpg">
<figcaption class="ImgeCaption">Incredible scones</figcaption>
</figure>
<figure>元素包装一个个的独立区块。在它里面又使用<figcaption>提供了父figure元素的标题
<details与<summary>元素
对于'展开/收起'
<header>
<footer>
<address>
h1-h6
h1到h6元素不能用于标记副标题、字幕、广告语，除非想把他们用作新区块或子区块的标题。
例如: <h1>Scones：</h1> <p>The most resplendent of snacks</p>
3.文本级语义
<b>:以前用于加粗文本，现在可以把它用作一个添加css样式的标记
<em>:用于给文本添加样式
<i>：不仅仅用于把文字标为斜体，该可以突出不同文本形式的方式。
4.作废的特性
hgroup
5.嵌入媒体
<video src=""></video>
aduio与video 区别
音频没有视频需要的播放区域
6.响应式视频与内嵌框架
本地服务器上的视频解决
1）将video 的高度和宽度属性删除
2）css添加 video{max-width:100%;height:auto}
嵌入视频解决方案
原文地址: https://alistapart.com/article/creating-intrinsic-ratios-for-video
7. 离线优先
就是要保证网站和应用始终可以打开，即使不上网也能加载内容。
目前还在打基础阶段，先把地址贴上有空回来再看。
https://www.youtube.com/watch?v=4uQMI7mFB6g
https://developers.google.com/web/fundamentals/primers/service-workers/
备注:关于flexbox更具体的参考 阮一峰的教程
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)
这两天就学到这么多，有什么错误请大家指正！共勉~