[Adaptive && Responsive design] Note

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存在优先级，应由大往小写
例如：

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

PC - 980px布局

---

元素classList属性

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

---

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

例如：animation若元素初始值为

  display:none

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