9.28前端笔记

一、定义帧动画：

      定义帧动画：
          0%-100%
          把一个周期分为多个帧，然后分析每个帧做的什么事情吧

            go home
          0%                   10%      70%     90%    95%            100%
         基地---（地铁） ----北京西--邯郸东--坐公交--让我妈骑电动车接---最后到家

          from：0%
          to:100%

二、引入帧动画

         谁要动谁就引入帧动画
            animation: name duration timing-function delay iteration-count direction fill-mode;
          动画名称 动画执行时间
             注意:动画名称 动画执行时间必须写,否则动画无效
            animation: run 5s;

            
            动画结束之后的显示状态
            forwards 动画结束时状态
            如果100%帧元素没有回到原点，那么到100%停留一下会回到原点
            forwards就可以停留在100%帧位置

            注意：要想停留在100%帧位置，这个帧必须是100%
           
        
        定义帧动画
        
        run：动画名称
        run名字随意起，不要用中文或纯数字
      
三、引入帧动画详解

        其余属性不设置走默认值
        速度曲线：ease
        延迟时间：0s
        执行次数：1
        是否轮流反向运动：否
        是否在结束状态：否

        分开写
        /* animation-name: run;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: 3;
        animation-direction: alternate; */

        animation：name duration timing-function iteration-count direction fill-mode;
        animation:动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态

        注意：动画名称和动画执行时间必须写，否则动画无效
        
        1.animation-name 动画名称 是定义关键帧所定义的动画名称
        2.animation-duration 动画执行的时间 单位：s/ms 1s=1000ms
        3.animation-timins-function 规定动画运动的速度曲线
           1.linear相同的速度从开始到结束，也就是匀速
           2.ease 默认值 慢速度开始-速度变快--慢速度结束
           3.ease-in 慢速度开始的过渡效果，也就是以低速度开始
           4.ease-out 慢速度结束的过渡效果，也就是低速结束
           5.ease-in-out 以慢速度开始和结束的过渡效果
        4.animation-delay 定义动画何时开始
          单位：s/ms
          取值：以秒或毫秒计
                默认值是0
        5.animation-iteration-count 动画的执行次数
            1.n 默认执行动画次数1次
            2.infinite 无限次播放动画
        6.animation-direction 定义是否应该轮流反向播放动画
            1.normal 默认值，正常播放
            2.alternate 动画轮流反向播放
            3.alternate-reverse 从第一次就反向运动
        7.animation-fill-moded动画结束之后的显示状态
            1.both：动画开始或结束的状态
            2.fowards 动画结束时状态
            3.backwards 动画开始的状态
            默认值：回到原点
        8.animation-play-state：paused; 动画播放暂停方式 暂停
            取值：
                running：运动
                praused：暂停

四、响应式
      
        http-equiv="X-UA-Compatible
        这个是针对ie8以上浏览器的一个属性，ie8以下无法识别。就是说ie8以上浏览器遇到这个属性会执行content的描述，大小写不敏感。
   
        例如：
        圆角属性不能在ie8及以下版本使用，怎么解决，
        如果要在ie8及以下浏览器使用，用ie高版本浏览器打开

        chrom=1；谷歌浏览器的最高版本
         <!-- 设置虚拟视口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        1.pc  电脑端 项目 ---小u课堂
        2.手机 移动端 项目 --小u商城
        3.响应式（pc 手机 ipad）项目 --小u商城后台管理系统
        一套代码适配所有终端（pc 手机 ipad）
        pc 一行显示四个模块
        ipad 一行显示两个模块
        移动端  一行显示一个模块

        不仅元素的尺寸大小发生改变，而且布局也发生了改变

        1.什么是响应式设计
           也叫响应式布局，响应式开发
           实现不同屏幕分辨率的终端上浏览网页的不同展示方式
           响应式布局是根据设备屏幕不同适当调整标签现实的布局，从而在每种设备屏幕宽度下呈现的界面是不同的
        2.响应式布局
            1.原理：
                 一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；
                 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同屏幕的目的
            2.优缺点
                 优点：
                    1.减少工作量，网站、设计、代码、内容都只需要一份，多出来的工作量只是JS脚本、css样式做一些改变
                    2.节省设计、开发、维护成本{不在特定的维护pc页面，移动页面}
                    3.面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题
                  缺点：
                    1.兼容问题（IE8以下不支持）
                    2.需要加载更多的样式和脚本文件
                    3.代码累赘，会出现隐藏无用的元素，加载时间加长
                    4.页面设计比较难于精确定位和控制
                    5.影响用户体验(一定程度上改变了网站原有的布局结构，会出现用户混淆的情况,)

           Bootstrap框架、苹果官网和星巴克官网使用的响应式布局

           响应式网站演示：https://segmentfault.com/

五、媒体查询的语法

         @media mediaType and(媒体特性表达式：media feather){
            写css样式
        } 
        mediaType：媒体设备类型
        screen：电脑屏幕、平板电脑、智能手机等
        specch：屏幕阅读器
        all：所有的多媒体设备
        print：打印设备

        media feather：媒体特性表达式
            min-width：最小宽
            max-width：最大宽
            1.横屏 宽高比高度大 orientation：landscape；
            2.竖屏：高度比宽度大 orientation：portrait；

        width：浏览器的宽度
        height：浏览器的高度
        max-width：最大宽度
        min-width：最小宽度
        device-width：设备宽度
        device-width：设备高度
        max-device-width：最大设备宽度
        min-device-width：最小设备宽度

        orientation：设备的窗口朝向
          1.横屏 宽高比高度大 orientation：landscape；
          2.竖屏：高度比宽度大 orientation：portrait；
            
          操作符：
             and 与、和 最多
             not  除了
             only 只能是这个
           
        需求：除了打印设备都可以用
        @media not print{}

        需求：只能屏幕有效
        @media only screen{}

        默认pc

        .wrap{
            background-color: aqua;
            display: flex;
            justify-content: space-evenly;
        }
        .wrap div{
             width: 24%;
             height: 200px;
             background-color: palegreen;
             margin-bottom: 20px;
        }
        屏幕宽度在992-1200px范围内样式走这里面的代码
        ipad 992-1200px
        
        @media screen and (max-width:1200px)and (min-width:992px){
            .wrap div{
                width: 48%;
            }
            .wrap{
                 换行
                flex-wrap: wrap;
            }
        }
        移动端 768px以下
        @media screen and (max-width:768px){
            .wrap div{
                width: 98%;
            }
            .wrap{

                flex-wrap: wrap;
            }
        }