CSS応答レイアウトやアニメーション

彼らは共通で何かを持っているので、応答性のレイアウトやアニメーションは、書き込みに一緒に入れ@、シンボル

応答性のレイアウトについての最初の話@media
応答レイアウト== ==一度非常に人気の、これは、レイアウトのページは、すべての機器との互換性があることを確認、しかし、より多くのページを特徴とするとき、CSSファイルが増加することができます彼らは歴史の舞台を去ったので、ますます困難との互換性、jsは、書き込みに困難になります、

今日では、まだ普及し手机端一份，pc端一份、PCは、CSSの適応を使用して達成したが、画面サイズの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; }
}