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，然后进行缩放
告诉浏览器别去缩放
加一句
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
image.png
4、移动端的特点
4.1、手机上没有hover
4.2、有touch事件（怎么知道用户在滑动呢？），根据2点触摸坐标的差值来判断
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
库
4.3、没有resize，没有放大和缩小
4.4、没有滚动条
网友评论