移动端入门（响应式）

1.媒体查询

1.1什么是媒体

这个概念非常重要
纸张，电脑，iPad，手机都是媒体，我们通过媒体查询可以获知用户在什么设备，从而写出针对性的css

1.2具体用法

基础用法

@media (min-width: 800px) {
  /*如果某个媒体满足宽度800px之上，那么css如下*/
  body {
      background: #fdf;
  }
}

@media (min-width: 600px) and (max-width: 800px) {
  /*如果某个媒体满足宽度在600-800px之间，那么css如下*/
  body {
      background: red;
  }
}

@media (min-width: 400px)and (max-width: 600px) {
  /*如果某个媒体满足宽度在400-600px之间，那么css如下*/
  body {
      background: orange;
  }
}

@media (max-width: 400px) {
  /*如果某个媒体满足宽度在0-400px之间，那么css如下*/
  body {
      background: black;
  }
}

常见用法 —— 与link结合

请注意：样式文件依然会下载

2.viewport

2.1 980px的历史

把一个pc端页面在手机端展示，如果宽度 <= 980，那么这个页面会等比缩小，超过这个范围，会出现滚动条
就像是在在一个980px宽度的小屏幕里显示一样，同时用户可以放大，缩小
为了解决这个问题，有了viewport

viewport的作用 —— 控制页面在手机端 不被缩放且能够 按照设备的实际宽度大小显示页面

2.2 如何验证

使用chrome调试工具调试到手机页面，在控制台输入document.documentClient.width即可
若获得980px，则说明未加meta viewport

3.移动端的特点

3.1没有hover事件，没有resize，没有滚动条(滚动条不显示)，只有touch事件

没有resize —— 在pc端你可以改变浏览窗口大小，但在移动端你不能

MDN触摸事件接口

非常简单，一共有四个 —— touchstart,touchmove,touchend,touchcancel

3.2用ontouchstart来判断是否支持touch事件

我们在控制台输入div.ontouchstart可以看到
在移动端，其值为null；在pc端，其值为undefined
我们可以利用这个来判断JavaScript是否支持touch事件

  if (document.body.ontouchstart !== undefined) {
    // code -> Mobile
  } else {
    // code -> PC
  }

3.3touch事件的clientX/Y

在pc端，clientX/Y我们直接可以通过event.clientX获得
但在touch事件中，我们获得的方式有些不一样

  let x = e.touches[0].clientX
  let y = e.touches[0].clientY

通过 clientX/Y来判断用户是否进行 向左/右/上/下滑动操作

通过clientX/Y记录下用户两次触摸的位移差即可判断
一般我们使用他人封装好的swipe库，比如vue-swipe，jQuery-swipe

3.4touch事件的TouchList

为什么会有TouchList？
因为手机端支持多个手指触控

3.5移动端阻止页面滚动

在相应的事件里使用e.preventDefault

3.6 在移动端可以尽情使用css3

因为没有IE啦~~

4.响应式的现状

对于一些功能复杂的网站，几乎没有响应式的影子，因为比较 傻

通用的方式有两个

1. 后端根据userAgent判断客户端类型，根据不同的类型分别渲染不同的页面（比如pc_index.html和mobile_index.html）
2. 后端根据userAgent判断客户端类型，根据不同的类型进行域名重定向