乐趣区

关于前端:移动端入门响应式

jiezi

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