2018-04-01 移动端页面（响应式）

1、媒体查询

image.png

image.png

还可以换一种方式

image.png

即用文件来代替内容
举个例子看
https://www.smashingmagazine.com/
所谓响应式，就是页面尺寸变了之后，页面样式也跟着变
2、问设计师要设计图

3、学会隐藏元素

需求：刚开始

image.png

当尺寸缩小之后，变成

image.png

logo不变，但是导航变成了一个按钮，需要点一下才显示

image.png

如果先设计手机页面，就叫mobile-first，如果先设计PC桌面，就叫desktop-first
推荐mobile-first
yy.classList.toggle('active')
toggle这个

另外一个思路：根据不同的设备（尺寸），使用不同的代码（各一套CSS+html等）

image.png

后端去实现
另外一种思路：根据不同的设备跳转不同的页面

image.png

用374去模拟980，然后进行缩放

告诉浏览器别去缩放
加一句

image.png

4、移动端的特点
4.1、手机上没有hover
4.2、有touch事件（怎么知道用户在滑动呢？），根据2点触摸坐标的差值来判断
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
库
4.3、没有resize，没有放大和缩小
4.4、没有滚动条