css的响应式布局和动画

把响应式布局和动画放在一起写是因为他们有个共同点@符号

先讲讲响应式布局@media

响应式布局曾经非常的流行，这种布局方式可以做出一也兼容一切设备的页面，但是当页面的功能越来越多，css文件越来越大，兼容难度越来越大，js也会很难写，于是他们离开了历史的舞台，

如今流行的还是手机端一份，pc端一份，pc用css适配实现，但是pc的屏幕大小也有很大的区别，于是响应式布局从适配手机pc转移到了适配各种pc屏幕大小上,这就是所有pc的css框架都会有的栅格系统

栅格系统原理

/* 超小屏幕（手机，小于 768px） */
@media (max-width: 767px) { ...css代码... }

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) and (max-width: 991px) { ...css代码... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) and (max-width: 1199px) { ...css代码... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { ...css代码... }

然后讲讲css3的动画@keyframes

动画效果的出现减少了页面对于gif图的依赖，也是间接的优化了文件请求个数的体现

div{
   width: 100px;
   height: 100px;
   background: red;
   /* 动画的名字，执行一次的时间，动画的速率，是否循环动画 */
   animation: name 5s infinite linear;
}

@keyframes name{
   from { background: red; }
   to { background: yellow; }
}