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

先讲讲响应式布局@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; } }

css的响应式布局和动画