### 移动端项目常见问题
1. 1PX问题
2. 适配问题
3. 苹果手机300ms延迟问题
4. 滚动加载数据
5. 多Tab栏页面懒加载
6. 移动Web输入框
2.1 字体设置成了动态大小，也应该限定最大值
2.2 动态修改HTML的font-size值，rem会随着font-size的变化而变化
2.3 1rem = html: font-size
2.4 可以根据屏幕尺寸的大小设定@media 的尺寸参数，不过这得一个一个去设定
#### 1.移动端像素分为 设备像素和CSS像素
1.1 设备像素：设备屏幕的物理像素，对于任何来讲物理像素的数量是固定的
例：iPhone 6/7/8 的设备物理像素为 750 * 1334
1.2 CSS像素 ：这是一个抽象的概念，它是为web开发者创造的
1.3 用户在缩小或放大页面的时候，实际上是在缩小或放大CSS像素
1.4 位图像素：一个位图像素对应一个物理像素，图片才能得到完美清晰的展示
#### 2.移动端的三个视口
1.1 布局视口： 页面的宽度 document.documentElement.clientWidth
页面的高度 document.documentElement.clientHeight
1.2 视觉视口： 用户正在看到网站的区域，就是设备屏幕的CSS宽度与高度
1.3 理想视口： 将布局视口设为设备理想视口，其实也就是设为视觉视口
<meta name="viewport" content="width=device-width">
#### 3.设备像素比(DPR)
1 设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数，前提是缩放比例为 1例：iPhone的设备像素为640，理想视口像素是320px 则iPhone的设备像素比是2
2. window.devicePixelRatio || 1
#### 4.meta标签：meta标签的意义在于：让布局视口等于理想视口
```<meta name="viewport"
content="width=device-width, initial-scale=1.0,
inimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
1. 设置布局视口宽度等于设备理想宽度
2. 设置页面的初始缩放程度
3. 设置页面最小缩放程度
4. 设置页面最大缩放程度
5. 是否允许用户对页面进行缩放操作
#### 5.媒体查询是响应式设计的基础
1.1 @media all (min-width: 320px) and (max-width: 400px) { .box: { color: red } }
在所有设备上当布局视口宽度大于等于320时并且小于等于400时，应用相应的样式
1.2 @media screen (min-width: 320px)
在屏幕设备上当布局视口宽度大于等于320时，应用相应的样式
#### 6. 初步解决方案
1.1 根据屏幕尺寸动态设置HTML的font-size
1.2 document.querySelector('html').fontSize = documet.docuemtElement.clientWidth / 10 + 'px'
1.3 封装SCSS函数：@return $px / 75 * 1rem，75 || 64 根据设计稿来定
#### 7. 高清屏和普通屏的区别：相同区域的物理像素点数不同
1. 1英寸 = 2.54厘米 1寸 = 3.33厘米
2. 像素：即一个小方块，它具有特定的位置与颜色
3. 图片、电子屏幕( 手机、电脑 )就是由无数个具有特定颜色和特定位置的小方块拼接而成的
4. 分辨率一般分为图片分辨率和屏幕分辨率
5. PPI：每英寸包含的像素数量
1. 像 iphone XS Max 和 iphone SE 的PPI分别为 458 和 326，前者的屏幕清晰度更高
6. DPI：每英寸包括的点数
1. 使用DPI来描述图片和屏幕时，这时的DPI和PPI是等价的
2. DPI最常见的是用来描述打印机，表示打印机每英寸可以打印的点数
7. 图像分辨率：800 * 400 ：表示垂直和水平上的像素点为 800 * 400
#### 滑动事件
1. 手动滑、通过函数触发滑动、惯性滑动
