CSS3 of detail

细枝末节

1. 版本兼容

   prefix	browser
   -webkit-	chrome/safari
   -moz-	firefox
   -ms-	ie
   -o-	opera

2. 响应式网页设计
   渐进增强--> iphone6向上兼容 兼容最新设备
   优雅降级--> 开发通用版本 再兼容老版本，向下兼容
   
   先移动端-->再pc端
   先iphone6为初始原型开发-->兼容其它设备-->渐进增强

3. 性能相关

   reflow 对dom结构影响了就要reflow，消耗性能（改变窗体文字大小、内容，激活伪类，操作class属性，操作Dom，计算offsetWidth/Height，设置style属性）

   repaint 只是改变颜色等，性能消耗就少一点，而且速度快于reflow
   
    

   触发GPU的方法：

   opacity:

   transform: translate3d() translatez(0)（用了transform就写上z，提醒浏览器用GPU，提高效率）

    

   GPU加速标准方法：will-change:transform; （提前告诉浏览器将transform变化放到另一个层）但是不能填all，属性值为具体哪个属性。最好就是属性变化前设置，不行就全局（相对耗多一点性能）
   div{
   width:100px;
   height:100px;
   }
   div:hover{
   will-change:transform;
   }
   div:active{
   transform:scale(2,3)
   }