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