## 一、H5 标签 有时候不太确定某个 Web API 与浏览器、手机浏览器能否兼容？`CanIUse(https://www.caniuse.com)`让你轻松测试 Web API 与浏览器的兼容情况。  对于不支持 H5 的浏览器，可以引入`html5shiv.js`来达到兼容的效果。 ## 二、CSS3  对于某些浏览器支持`CSS3`，但是需要添加浏览器前缀。同时也可以使用`modernizr.js`来对不支持的浏览器做兼容处理。 ``` <header>header</header> <footer>footer</footer> ``` ``` .flexbox header { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; } .no-flexbox header { text-align: center; line-height: 50px; } ``` ``` <script src="js/modernizr.js"></script> ``` ## 三、JS 在 Web 应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，那就是 requestAnimationFrame，顾名思义就是**请求动画帧。** ``` // 判断requestAnimationFrame是否可用 if (window.requestAnimationFrame) { // ... } // 或者 var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (fn) { setTimeout(fn, 20) }; ```