Css3 @supports | @media | @keyframes | rem字体
**“@media”**规则，主要用来“根据媒体属性区分样式表”(特别是在Responsive设计中，发挥的作用更是强大)；
“@supports”，主要用来代替前面常用的Modernizr库，在不支持CSS3的浏览器下实现渐进增强式设计。
/*@media 语法*/
@media (min-width: 992px) {
.modal-lg {
max-width: 800px;
}
}
/*supports 语法*/
@supports <条件规则> {
/* 特殊样式规则 */
}
/*区别在于 supports ，在不支持CSS3的浏览器的时候,用来代替前面常用的Modernizr库*/
@keyframes 创建动画
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div> 动画方框 </div>
</body>
</html>
rem是相对于根元素 html, 进行大小辨析的
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
//如果没有设置，将是以“16px”为基准
