动画和移动端

animation

动画有两个部分组成

       1.通过类似flash动画的关键帧来声明一个动画
       2.在animation属性中调用关键帧声明的动画来实现

设置关键帧@keyframes

注意：写兼容的时候，前缀是放在@keyframes中间

  例如
    @-webkit-keyframes
    @-moz-keyframes

动画播放次数（animation-iteration-count）

   值通常为整数，默认值为1
   特殊值infinite 表示无限循环

动画播放方向（animation-direction）

normal（默认）动画每次都是循环向前播放
alternate 动画播放为偶次数向前播放

移动端和自适应

移动端的知识

（适配移动端的时候一定要加上视口标签）

<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport视口
width=device-width 宽度等于设备宽度
initial-scale=1.0 初始化不缩放

• rem 移动端的使用单位，是相对于根元素（html）来设置的

• 1个rem是相当于根元素字体大小，2rem等于根元素大小的两倍

• em是相对于父元素来设置的

• 1个em是相当于父元素字体大小，2rem等父元素大小的两倍

• 父元素如果有变化，em所对应的px也会产生变化

• 移动端项目推荐使用rem

• 响应式布局移动端+

    div {
        width: 200px;
        height: 200px;
        background-color: blanchedalmond;
    }
    /* 实现div在屏幕大小不同的情况下，显示不同颜色 */
    /* 媒体查询 */
    /* max-width最大宽度   min-width最小宽度 */
    /* 500-700包括500和700的时候 */
   /* @media screen and (max-width:700px) and (min-width:500px){
       div{
           background-color: aquamarine;
       }
   } */
   /* min-width:800px 屏幕大小，大于等于800的时候显示如下样式 */
   @media screen and (min-width:800px){
       div{
           background-color: aquamarine;
       }
   }
    /* max-width:700px屏幕大小，小于等于700的时候显示如下样式 */
   @media screen and (max-width:700px){
       div{
           background-color: rgb(90, 106, 194);
       }
   }