// 像素
1. 物理像素就是分辨率上的点,又叫设备像素(dp),一个点就是一个三原色(红绿蓝)
2. css像素 = 逻辑像素 = 设备独立像素(dip)
1. 设备独立像素是一个虚拟的单位，独立于设备，是用于逻辑上衡量长度的单位，由底层系统的程序使用，会由相关系统转换为物理像素。
2. 在浏览器上看到的宽高都是 css 像素
3. css像素在标清屏下中对应一个物理像素
4. css像素在高清屏下对应多个物理像素
5. 设备像素比(dpr) = 设备像素 / css像素
1. window.devicepixelRatio
6. dpr > 1都属于高清屏
7. 缩放时是指css像素
8. ppi 或 dpi 是每英寸的物理像素点，可以通过对角线的分辨率除以实际对角线的长度就是每英寸的物理像素点
----------------------------------------------------------------------------------------------
// 视口
1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scala=1, minimum-scale=1">
width=device-width 表示宽度设置成设备的宽
initial-scale=1 表示缩放比例是 1
user-scalable=no 表示不让用户缩放
maximum-scala=1 表示最大缩放比例是 1
minimum-scale=1 表示最小缩放比例是 1
2. 设备像素比: window.devicepixelRatio
3. js获取视口宽: documentElement.clientWidth || window.innerWidth
4. 视口可视区默认980px，如果不写第一点的 meta 标签，则默认是 980px，有些浏览器不是，大部分是
----------------------------------------------------------------------------------------------
// 媒体查询
1. 针对不同屏幕大小写样式
2. 类型: 1、all全部,2、screen屏幕,3、print打印,4、speech阅读器
3. 逻辑: 1、与(and),2、或(,),3、非(not),在and前加not包括全部,在有‘,’时只包括一种
4. max-width: 900px // 最大宽度
5. min-width: 500px // 最小宽度
6. -webkit-min-device-pixel-ratio: 2 或 -webkit-max-device-pixel-ratio: 2 // 设备像素比
7. orientation: landscape(横屏) / portrait(竖屏)
8. @media(特征表达式4、5、6、7) {}
----------------------------------------------------------------------------------------------
// 移动端屏幕适配
1. 使页面在移动端各种大小的屏幕上都能够正常显示的一种移动端开发方案
----------------------------------------------------------------------------------------------
// 响应式布局
1. 对于不同屏幕尺寸做出响应,并进行相应布局的一种移动web开发方式
2. 原理是通过媒体查询实现的，即对不同屏幕尺寸写对应的 CSS
----------------------------------------------------------------------------------------------
// 移动端屏幕适配和响应式布局的关系
1. 对应终端不同,移动端仅支持移动端,响应式布局则要支持pc和移动端
2. 常用单位不同,移动端宽高用rem、%,字体用px,响应式布局宽用%,高和字体用px
3. 移动端的宽和高都随着屏幕大小变化等比例变化,响应式布局的宽度变化,高度不变,不等比例
----------------------------------------------------------------------------------------------
// 移动端屏幕适配方案之 amfe-flexible
1. 1rem = viewWidth / 系数
2. 一像素边框问题是由dpr造成的，在设备像素比大于1的屏幕上，我们写的1px实际上是被多个物理像素渲染，这就会出现1px在有些屏幕上看起来很粗的现象
3. scale(缩放比) = 1 / dpr(设备像素比)
4. 使用rem为单位,且动态的(onresize)改变html的font-size的值
5. 设置viewport
6. 再动态的设置缩放比解决1像素边框问题
7. 视口的缩放比会影响视口的宽
8. 可以限制视频宽来实现最大最小宽
9. 使用 px2rem 自动转换单位
10. rem 原理理解
1. 假设在 375 屏幕下的 1rem = 20px // 20px 是自己定义的，不是固定的
2. 当屏幕大小发生变化时，则需要动态的计算出当前屏幕宽度和原来 375 的比值
3. 然后通过这个比值 * 20px，即得到了当前屏幕下的 1rem 的值
4. 在以上的基础上，对应的 amfe-flexible 内部的原理是
1. 假设 1rem = viewWidth / 系数 // 系数是自己定义的，不是固定的，就是一个系数而已，不除也可以，只是比较大
2. 当屏幕大小发生变化时，则重新计算 1rem = viewWidth / 系数
3. 这样就实现了动态 1rem
5. 在理解以上内容后，我们再来看一像素边框问题
1. 其实 amfe-flexible 有两个版本，最早的 1.0 版本除了实现了动态改变 html font-size 的值之外
还根据当前页面的 dpr 动态的改变了 viewport 标签的缩放比例，这是为了解决一像素边框的问题
2. 在现在 2.0 版本中已经去除了改变 viewport 标签的缩放比例的代码
----------------------------------------------------------------------------------------------
// 1 边框问题
1. 真正原因不是 dpr 的原因，而是 CSS 最低支持显示 1px，如果在 750px 的设计稿上的边框是 1px，而在
375px 的屏幕下就应该是 0.5px，但是 CSS 不支持 0.5px 展示，所以导致框架会太粗 // ios较新版已支持0.5px，安卓不支持
2. 从另一个角度去理解这个问题，如果是 dpr 的原因为什么只有 1px 才会出现变粗的问题，而 10px、20px 等不会呢？
3. 解决方案
1. 通过动态修改 viewport 的 scale 缩放比例
2. transform: scale() 缩放 // 推荐
3. border-image
4. 换淡一点的颜色
----------------------------------------------------------------------------------------------
// 移动端屏幕适配方案之 viewport
1. 使用 postcss-px-to-viewport 把 px 转换成 vw，配合百分比
----------------------------------------------------------------------------------------------
// 移动端常用单位
1. em相对于本身的字体大小的倍数
2. rem相对于html的字体大小的倍数
3. vw视口宽,vh视口高
----------------------------------------------------------------------------------------------
// 抓包
1. 移动端h5页面,查看网络请求,需要用工具抓包
2. window一般用fiddler
3. mac一般用charles
4. 手机电脑连同一个局域网,将手机代理到电脑上,手机浏览网页即可抓包
5. 可查看网络请求,网址代理,查看https请求
----------------------------------------------------------------------------------------------
// 移动端 H5 click 300ms 延迟
1. 在移动端的浏览器上可以双击屏幕放大，iPhone 的 double tap to zoom，导致点击时会延迟 300ms 延迟
从而判断是点击还是双击放大
2. 解决方法
1. 早期使用 FastClick
1. 监听 touchend 事件（touchstart 和 touchend 会优先 click 触发）
2. 使用自定义 DOM 事件模拟一个 click 事件
3. 把默认的 click 事件（300ms 之后触发）禁止掉
2. 现在的浏览器都支持 meta 标签
1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 浏览器检测到有 content="width=device-width" 就表示当前页面有对移动端进行优化
即 Pc 一套 ui，移动端一套 ui，认为是响应式布局了，从而不需要有 300ms 延迟了
----------------------------------------------------------------------------------------------
// 其他
1. 在做移动端开发时,要移动端优先的写css代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
