zoukankan      html  css  js  c++  java
  • css的响应式布局和动画

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

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

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

    栅格系统原理

    /* 超小屏幕(手机,小于 768px) */
    @media (max- 767px) { ...css代码... }
    
    /* 小屏幕(平板,大于等于 768px) */
    @media (min- 768px) and (max- 991px) { ...css代码... }
    
    /* 中等屏幕(桌面显示器,大于等于 992px) */
    @media (min- 992px) and (max- 1199px) { ...css代码... }
    
    /* 大屏幕(大桌面显示器,大于等于 1200px) */
    @media (min- 1200px) { ...css代码... }
    

    然后讲讲css3的动画@keyframes
    动画效果的出现减少了页面对于gif图的依赖,也是间接的优化了文件请求个数的体现

    div{
        100px;
       height: 100px;
       background: red;
       /* 动画的名字,执行一次的时间,动画的速率,是否循环动画 */
       animation: name 5s infinite linear;
    }
    
    @keyframes name{
       from { background: red; }
       to { background: yellow; }
    }
    
  • 相关阅读:
    DbEntry——学习笔记(二)
    新的开始
    Jquery Dialog的使用
    使用System.Net.Mail.MailMessage 来发送邮件
    三层架构中的"业务逻辑层"
    Ajax请求中的async:false/true的作用
    1
    招聘会项目的开发
    操作全角与半角(C#)
    sqlserver把数据库中的表完整的复制到另一个数据库
  • 原文地址:https://www.cnblogs.com/pengdt/p/12037528.html
Copyright © 2011-2022 走看看