动画
transform变形3D
3D相关属性
- 对元素运用2D或3D：transform
- 改变所转换的元素的位置，转换时依据的原点：transform-origin
- 在3D空间中的展示形式：transform-style
- 3D元素透视效果：perspective
- 观察者的位置/视角：perspective-origin
- 元素在不面对屏幕时是否可见：backface-visibility
3D转换的方法
- translate3d(x,y,Z)：作用于三个轴上的3D转换
- rotate3d(x,y,z,angle)：3D旋转
- scale3d(x,y,z)：3D缩放
- matrix3d：使用16个值的4×4矩阵实现3D转换
- perspective(n)：3D转换元素的透视视图
transform过渡
指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态。
创建过渡效果必须明确
- 需要给元素的何种CSS属性添加过渡效果
- 过渡效果持续多长时间
注意：过渡效果持续时间默认为0，若未规定，则不会有过渡效果。
过渡相关属性
CSS 过渡属性：
- 简写属性，将四个过渡属性设置为单一属性： transition
- 过渡效果开始前的延迟（单位：s）：transition-delay
- 过渡效果的持续时间（s/ms）：transition-duration
- 过渡效果所针对的CSS属性名称：transition-property
- 过渡效果的速度曲线：transition-timing-function
速度曲线
transition-timing-function属性有下列几个值：
- ease：缓慢开始，加速，缓慢结束
- linear：匀速
- ease-in：缓慢开始
- ease-out：缓慢结束
- ease-in-out：缓慢开始和结束
- cubic-bezier(n,n,n)：使用贝塞尔函数，最高三阶
- step：阶跃，适用于逐帧动画、定格动画、闪烁、时钟等
建议
- 尽量使用transform和opacity实现动画效果
- 尽量不使用会触发reflow的属性
- 遇到性能问题时，可触发硬件加速，如设置will-change、transform3d等
响应式设计
媒体查询
媒体查询允许某些样式只在满足特定条件时才生效，所以可以将媒体类型（screen/print）以及媒体特性（视口宽度、屏幕比例、设备方向）作为约束条件来设计页面。
Tips：
- 媒体查询遵循caseading层叠覆盖原则
- 由于设备越来越多样化，尽量根据内容选择断点
- 增加断点会增加样式处理的复杂度，尽量少用
像素
设备像素
显示器上绘制的最小单位，物理像素，由设备厂家决定。
dpi：每英寸多少点
ppi：每英寸多少像素数
用于描述显示器设备时，二者可以等同，指每英寸多少物理像素。
CSS像素
CSS像素具体定义在这里不赘述，浏览器可以根据硬件设备直接获取CSS像素。需要了解的是，CSS像素存在的目的是为了保证阅读体验一致，CSS使浏览器中的1个CSS像素大小在不同物理设备上看起来差不多大。
设备像素比（DPR）
设备像素比描述在未放缩状态下，设备像素与CSS像素的初始比例。
DPR=设备像素/CSS像素
常用单位
em
例如：2em表示当前字体大小的2倍
- 在非font-size属性中是指相对于自身字体的大小
- 在font-size中是指相对于父元素字体的大小（多重嵌套后易产生混乱）
应用：展示区域根据字号的不同做出放缩调整
rem
rem是指根元素的字体大小，通过伪类:root或html选择器选定。
rem不会像em那样出现多重嵌套后混乱的问题，它作为一个相对单位，可进行适配放缩。
vh和vw
vh：视窗高度的1%
vw：视窗宽度的1%
