CSS成长笔记

移动适配（响应式）

4个要点
1、media query
2、提前有设计稿
3、隐藏元素
4、手机端添加meta:vp（例如：320px宽的手机默认会模拟980px的网页，强制手机页面与设备宽度相等width=device-width）

移动端和PC端不同点

1、无hover
2、有touch事件
3、无resize事件
4、无滚动条

media注意点

1、CSS存在优先级，应由大往小写
例如：

<style>
    .con{
      width:200px;
      height:200px;
      background-color:red;
    }
     @media (max-width:980px){
       .con{
         background-color:blue;
       }
     }
     @media (max-width:768px){
       .con{
         background-color:green;
       }
     }
     @media (max-width:430px){
       .con{
         background-color:yellow;
       }
     }
     // 若小的放上面，则始终应用980px，条件都成立被覆盖
</style>

需要做哪些尺寸的响应式应该提前知道对应的的尺寸和样式

PC - 980px布局

元素classList属性

方法：toggle / add / remove / item / replace / contains

JS中不要直接修改style（尽量，今天项目踩了很多坑）

例如：animation若元素初始值为

  display:none

动画会没效果，不管你后期再设为block都没效果