响应式Web设计的基本工具是流体栅格、灵活适应的媒体，以及媒体查询 。遵循“移动优先”的策略——先从小屏幕开始，再向大屏幕扩展——进行设计开发。在响应式Web设计中，如果小屏幕上不加载某一部分内容，那么大屏幕上也不应加载。
IE 9 及以上版本支持媒体查询，IE 9及以下版本不支持Flexbox（具体信息参见：Can I use）。
使用外部SVG资源代替CSS sprite，但在所有兼容SVG的IE版本（9、10、11）里，不能引用外部SVG资源。
文摘
Flexbox
Flexbox有4个关键特性：方向、对齐、次序和弹性。关于Flexbox的对齐，最重要的是理解“主轴”和“交叉轴”。若Flexbox的方向为 row ，则主轴就是横轴，交叉轴就是纵轴；反之，若Flexbox的方向为 column ，则主轴就是纵轴，交叉轴为横轴。flex对应：伸展（flex-grow）、收缩（flex-shrink）、基准（flex-basis）。
display : flex | inline-flex
flex-direction : row | row-reverse | column | column-reverse
flex-wrap : nowrap | wrap | wrap-reverse
flex-flow : <flex-direction> || <flex-wrap>
justify-content : flex-start | flex-end | center | space-between | space-around
align-items : flex-start | flex-end | center | baseline | stretch
align-content : flex-start | flex-end | center | space-between | space-around | stretch
align-self : auto | flex-start | flex-end | center | baseline | stretch
order : <integer>
flex-grow : <number>
flex-shrink : <number>
flex-basis : content | <width>
flex : none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
CSS3 伪类选择器
:first-child、:last-child、:not、:empty、:has
:nth-child(n)，选择第n项；:nth-child(an+b)，选择第b项，且每a个选一个；传入odd选奇数项，传入even选偶数项。:nth-child选择同级DOM中的子元素，:nth-last-child反向选取。而:nth-of-type、:nth-last-of-type则区分标记类型。
CSS3 过渡、变形、动画
当知道动画的起始状态和终止状态，并且需要一个简单的变形方法时，使用CSS3过渡：
transition-property：要过渡的CSS属性的名字
transition-duration：定义过渡效果持续的时长
transition-timing-function：定义过渡期间的速度变化
transition-delay：用于定义过渡开始前的延迟时间
当需要在视觉上改变某个元素但又不想影响页面布局的时候，使用CSS3变形（默认的变形原点在元素正中心）：
scale：用来缩放元素（放大和缩小）
translate：在屏幕上移动元素（上下左右）
rotate：按照一定角度旋转元素（单位为度）
skew：沿X和Y轴对元素进行斜切
当想在一个元素上执行一系列关键帧动画时，使用CSS3动画：
animation-name：关键帧声明
animation-duration：持续时长
animation-timing-function：速度变化
animation-iteration-count：运行次数（infinite，无限次）
animation-play-state：running | paused;
animation-delay：开始延迟
animation-fill-mode：none | forwards | backwards | both;
animation-direction：播放方向（normal | reverse | alternate | alternatereverse）