css responsive layout and animations

The responsive layout and animations put together to write because they have something in common @symbol

First talk about responsive layout@media
responsive layout == == once very popular, this can make a layout page is also compatible with all the equipment, but when more and more features page, css files increases, compatible with more and more difficult, js will be difficult to write, so they left the stage of history,

Today, still popular 手机端一份，pc端一份, pc achieved using css adaptation, but the screen size pc is also very different, so responsive layout == transferred from the adapter to the phone pc pc == various screen sizes fit, that's all the pc css框架will be some栅格系统

Grid System Principles

/* 超小屏幕（手机，小于 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代码... }

Then talk about css3 animation@keyframes
appear animated gif reduce the dependence graph page, but also indirectly reflects the optimization of the number of documents requested

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

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