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; }
}

相关推荐