移动端入门（响应式）

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结合

<link rel="stylesheet" href="style.css" media="(max-width:600px)">
<!--这句话的意思是：宽度在0-600之间才会使用这个样式文件-->

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

2.viewport

2.1 980px的历史

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

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

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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判断客户端类型，根据不同的类型进行域名重定向