移动端适配

移动端适配主要解决的问题有：

1. 移动端设备的自动缩放在大部分情况下都是要禁用的，主要使用meta viewport解决
2. 移动端有许多的种类，它们的分辨率不尽相同，可以使用media媒体查询解决
3. 移动端的屏幕与PC端屏幕有较大的差别，显示效果有很大的不同，可以使用动态REM方案解决
4. 移动端的触发事件和PC端有很大不同

详细叙述

1. 使用meta viewport 代码禁止用户缩放页面

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

• width=device-width 意思是页面宽度等于设备宽度

• user-scalable=no
  意思是禁止用户缩放页面

• initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  意思是原始缩放比例，最大缩放比例，最小缩放比例都是1.0
  使用以上代码就能使得移动端用户不能自动缩放页面

2. 媒体查询（media）

  使用media查询不同条件（例如分辨率不同）下使用不同的外部样式，使得页面能够更美观。

3. 动态REM方案

  rem指根元素（html元素）的字体大小.
动态REM方案指在js中获取页面宽度，将页面宽度与rem进行关联。然后将rem和px进行关联，就能够比较方便的设置页面样式。一般设置1rem=0.1设备宽度/0.01设备宽度。需要注意的是有些浏览器或者操作系统有最小像素设置，可能会让动态REM方案失效（例：Chrome浏览器能识别的最小像素为12px）。可以使用scss自动让px转化为rem。

4. 移动端事件的特殊性

• 操作方式（手指操作、传感器）

  PC端使用鼠标操作，操作包含滑动、左击、右击、双击操作，操作相对来说单一，交互效果相对较少，
  手机端使用手指操作，包含点击、滑动、双击、双指放大、双指缩小、五指收缩和3Dtouch按压力度，以及配合传感器完成摇一摇、陀悬仪感应灯操作方式。