移动端基础部分知识

1.像素的相关问题
1.1 物理像素(像素点)

屏幕就是这个样子的

可以看到：整个屏幕是由一个个的点组成的，每个屏幕上的点一定是有限的，现在的技术还做不到无穷个点组成屏幕。那么这些有限的点就叫做像素，或者叫做物理像素(physical pixel)
如果再放大一些，观察具体的一个像素点

1.2 分辨率
如上图，每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率

比如，小米11

屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细

所以，我们都喜欢买像素高的手机

1. CSS代码规范

2. CSS模块化

3. 百度代码规范

3.1 JavaScript编码规范
3.2 JavaScript编码规范 - ESNext补充篇
3.3 HTML编码规范
3.4 CSS编码规范
3.5 Less编码规范
3.6 E-JSON数据传输标准
3.7 模块和加载器规范
3.8 包结构规范
3.9 项目目录结构规范
3.10 图表库标准
3.11 react编码规范
4. CSS Reset

5.布局

6.电商项目实战

7. javascript

7.1.面向对象

7.2.原型和继承
7.3.函数相关
7.4 正则表达式
8. 移动端

8.1.移动端基础
1.1 物理像素(像素点)
1.2 分辨率
1.3 1px=1个物理像素？
1.4 逻辑像素
1.5 设备像素比
1.6 缩放
1.7 ppi
1.8 二倍图
2. 视口
2.1 布局视口 layout viewport
2.2 视觉视口 visual viewport
2.3 理想视口 ideal viewport
2.4 meta标签（理想视口的设定）
2.5 box-sizing
3. 移动开发方案选择
3.1 移动端主流方案
4. 移动端常见布局

1. 像素的相关问题
   1.1 物理像素(像素点)
   如果我们拿着放大镜看屏幕

屏幕就是这个样子的

可以看到：整个屏幕是由一个个的点组成的，每个屏幕上的点一定是有限的，现在的技术还做不到无穷个点组成屏幕。那么这些有限的点就叫做像素，或者叫做物理像素(physical pixel)

如果再放大一些，观察具体的一个像素点

1.2 分辨率
如上图，每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率

比如，小米11

屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细

所以，我们都喜欢买像素高的手机

1.3 1px=1个物理像素？
屏幕在显示信息时，是否1px就是一个物理像素点呢？

早期的手机屏幕，都是所谓的普通屏幕，也就是标清屏，1css像素=1个物理像素

但是随着 Retina(视网膜屏)等技术的兴起，能够将更多的物理像素点压缩至一块屏幕中，从而达到跟高的分辨率，提升屏幕显示的细腻度

现在的手机大多都采用Retina技术或者更高的显示技术

手机A 分辨率：4*2（横向上两个像素点，纵向上4个像素点）

手机B 分辨率：8*4 （横向上4个像素点，纵向上8个像素点）

有1个 宽 1px，高 1px 的元素要显示在屏幕上

如果使用物理像素表示 1px，结果就是手机B上显示的要比手机A上小

结论：不能使用物理像素表示元素尺寸

1.4 逻辑像素
逻辑像素（logical pixel）也叫

CSS 像素

设备独立像素 (dpi：device independent pixel)
实际开发中使用的像素

.box{
    width: 2px;  /* 逻辑像素 */
    height: 2px; /* 逻辑像素 */
}

总结：

1.在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子最中使用 22 个物理象时表示
2.在高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用44个物理像素表示
3.整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍
4.如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）
5.css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与

1.5 设备像素比
dpr：device pixel ratio

dpr=设备像素/css像素(缩放比是1的情况，参考1.6缩放一节，就明白为什么加这个限制了)

上面指的是同一方向上，也就是谈到设备像素比时，只考虑1个方向

还是这张图片

左边的 dpr=1，右边的dpr=2

所以,dpr=2，就是1个css像素用 2x2个设备像素(物理像素)来绘制

iphone 6 的 dpr就是2，iphone6+ 的 dpr=3
1.6.1 放大

分析：上面是放大2倍时的效果

原来，1个css像素=1个物理像素
放大2倍，就是让1个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点
所以，放大2倍后，1个css像素=2x2个物理像素
1.6.2 缩小

分析：上面是缩小到1/2的效果

原来1个css像素=1个物理像素
缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以我们看到右边屏幕上，缩小后，4个css像素才等于1个css像素
所以，缩小1/2后，2x2个css像素=1个物理像素

1. CSS代码规范

2. CSS模块化

3. 百度代码规范

3.1 JavaScript编码规范
3.2 JavaScript编码规范 - ESNext补充篇
3.3 HTML编码规范
3.4 CSS编码规范
3.5 Less编码规范
3.6 E-JSON数据传输标准
3.7 模块和加载器规范
3.8 包结构规范
3.9 项目目录结构规范
3.10 图表库标准
3.11 react编码规范
4. CSS Reset

5.布局

6.电商项目实战

7. javascript

7.1.面向对象

7.2.原型和继承
7.3.函数相关
7.4 正则表达式
8. 移动端

8.1.移动端基础
1.1 物理像素(像素点)
1.2 分辨率
1.3 1px=1个物理像素？
1.4 逻辑像素
1.5 设备像素比
1.6 缩放
1.7 ppi
1.8 二倍图
2. 视口
2.1 布局视口 layout viewport
2.2 视觉视口 visual viewport
2.3 理想视口 ideal viewport
2.4 meta标签（理想视口的设定）
2.5 box-sizing
3. 移动开发方案选择
3.1 移动端主流方案
4. 移动端常见布局

1. 像素的相关问题
   1.1 物理像素(像素点)
   如果我们拿着放大镜看屏幕

屏幕就是这个样子的

可以看到：整个屏幕是由一个个的点组成的，每个屏幕上的点一定是有限的，现在的技术还做不到无穷个点组成屏幕。那么这些有限的点就叫做像素，或者叫做物理像素(physical pixel)

如果再放大一些，观察具体的一个像素点

1.2 分辨率
如上图，每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率

比如，小米11

屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细

所以，我们都喜欢买像素高的手机

1.3 1px=1个物理像素？
屏幕在显示信息时，是否1px就是一个物理像素点呢？

早期的手机屏幕，都是所谓的普通屏幕，也就是标清屏，1css像素=1个物理像素

但是随着 Retina(视网膜屏)等技术的兴起，能够将更多的物理像素点压缩至一块屏幕中，从而达到跟高的分辨率，提升屏幕显示的细腻度

现在的手机大多都采用Retina技术或者更高的显示技术

手机A 分辨率：4*2（横向上两个像素点，纵向上4个像素点）

手机B 分辨率：8*4 （横向上4个像素点，纵向上8个像素点）

有1个 宽 1px，高 1px 的元素要显示在屏幕上

如果使用物理像素表示 1px，结果就是手机B上显示的要比手机A上小

结论：不能使用物理像素表示元素尺寸

1.4 逻辑像素
逻辑像素（logical pixel）也叫

CSS 像素
设备独立像素 (dpi：device independent pixel)
实际开发中使用的像素

.box{
width: 2px; /* 逻辑像素 /
height: 2px; / 逻辑像素 */
}
下面是上面盒子在不同屏幕上实际的显示效果

总结：

在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子最中使用 22 个物理象时表示
在高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用44个物理像素表示
整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍
如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）
css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与

1.5 设备像素比
dpr：device pixel ratio

dpr=设备像素/css像素(缩放比是1的情况，参考1.6缩放一节，就明白为什么加这个限制了)

上面指的是同一方向上，也就是谈到设备像素比时，只考虑1个方向

还是这张图片

左边的 dpr=1，右边的dpr=2

所以,dpr=2，就是1个css像素用 2x2个设备像素(物理像素)来绘制

iphone 6 的 dpr就是2，iphone6+ 的 dpr=3

1.6 缩放
物理像素是不能改变大小的

缩放其实就是改变1css 像素等于多少个物理像素，换言之，就是1个css像素需要用多少个物理像素表示

1.6.1 放大

分析：上面是放大2倍时的效果

原来，1个css像素=1个物理像素
放大2倍，就是让1个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点
所以，放大2倍后，1个css像素=2x2个物理像素
1.6.2 缩小

分析：上面是缩小到1/2的效果

原来1个css像素=1个物理像素
缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以我们看到右边屏幕上，缩小后，4个css像素才等于1个css像素
所以，缩小1/2后，2x2个css像素=1个物理像素
1.7 ppi
pixels per inch，表示每英寸的物理像素点，这考验一个屏幕厂商的设计和生产能力

ppi，也称作 dpi(dots per inch)

如小米11的 ppi 为 515

屏幕上的像素点也是多，也是密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数

PPI 的计算方法

1. CSS代码规范

2. CSS模块化

3. 百度代码规范

3.1 JavaScript编码规范
3.2 JavaScript编码规范 - ESNext补充篇
3.3 HTML编码规范
3.4 CSS编码规范
3.5 Less编码规范
3.6 E-JSON数据传输标准
3.7 模块和加载器规范
3.8 包结构规范
3.9 项目目录结构规范
3.10 图表库标准
3.11 react编码规范
4. CSS Reset

5.布局

6.电商项目实战

7. javascript

7.1.面向对象

7.2.原型和继承
7.3.函数相关
7.4 正则表达式
8. 移动端

8.1.移动端基础
1.1 物理像素(像素点)
1.2 分辨率
1.3 1px=1个物理像素？
1.4 逻辑像素
1.5 设备像素比
1.6 缩放
1.7 ppi
1.8 二倍图
2. 视口
2.1 布局视口 layout viewport
2.2 视觉视口 visual viewport
2.3 理想视口 ideal viewport
2.4 meta标签（理想视口的设定）
2.5 box-sizing
3. 移动开发方案选择
3.1 移动端主流方案
4. 移动端常见布局

1. 像素的相关问题
   1.1 物理像素(像素点)
   如果我们拿着放大镜看屏幕

屏幕就是这个样子的

可以看到：整个屏幕是由一个个的点组成的，每个屏幕上的点一定是有限的，现在的技术还做不到无穷个点组成屏幕。那么这些有限的点就叫做像素，或者叫做物理像素(physical pixel)

如果再放大一些，观察具体的一个像素点

1.2 分辨率
如上图，每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率

比如，小米11

屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细

所以，我们都喜欢买像素高的手机

1.3 1px=1个物理像素？
屏幕在显示信息时，是否1px就是一个物理像素点呢？

早期的手机屏幕，都是所谓的普通屏幕，也就是标清屏，1css像素=1个物理像素

但是随着 Retina(视网膜屏)等技术的兴起，能够将更多的物理像素点压缩至一块屏幕中，从而达到跟高的分辨率，提升屏幕显示的细腻度

现在的手机大多都采用Retina技术或者更高的显示技术

手机A 分辨率：4*2（横向上两个像素点，纵向上4个像素点）

手机B 分辨率：8*4 （横向上4个像素点，纵向上8个像素点）

有1个 宽 1px，高 1px 的元素要显示在屏幕上

如果使用物理像素表示 1px，结果就是手机B上显示的要比手机A上小

结论：不能使用物理像素表示元素尺寸

1.4 逻辑像素
逻辑像素（logical pixel）也叫

CSS 像素
设备独立像素 (dpi：device independent pixel)
实际开发中使用的像素

.box{
width: 2px; /* 逻辑像素 /
height: 2px; / 逻辑像素 */
}
下面是上面盒子在不同屏幕上实际的显示效果

总结：

在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子最中使用 22 个物理象时表示
在高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用44个物理像素表示
整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍
如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）
css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与

1.5 设备像素比
dpr：device pixel ratio

dpr=设备像素/css像素(缩放比是1的情况，参考1.6缩放一节，就明白为什么加这个限制了)

上面指的是同一方向上，也就是谈到设备像素比时，只考虑1个方向

还是这张图片

左边的 dpr=1，右边的dpr=2

所以,dpr=2，就是1个css像素用 2x2个设备像素(物理像素)来绘制

iphone 6 的 dpr就是2，iphone6+ 的 dpr=3

1.6 缩放
物理像素是不能改变大小的

缩放其实就是改变1css 像素等于多少个物理像素，换言之，就是1个css像素需要用多少个物理像素表示

1.6.1 放大

分析：上面是放大2倍时的效果

原来，1个css像素=1个物理像素
放大2倍，就是让1个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点
所以，放大2倍后，1个css像素=2x2个物理像素
1.6.2 缩小

分析：上面是缩小到1/2的效果

原来1个css像素=1个物理像素
缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以我们看到右边屏幕上，缩小后，4个css像素才等于1个css像素
所以，缩小1/2后，2x2个css像素=1个物理像素
1.7 ppi
pixels per inch，表示每英寸的物理像素点，这考验一个屏幕厂商的设计和生产能力

ppi，也称作 dpi(dots per inch)

如小米11的 ppi 为 515

屏幕上的像素点也是多，也是密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数

PPI 的计算方法

以小米11为例，计算一下

$$\frac{\sqrt{1440^2+3200^2}}{6.81}=515ppi$$

下面列出常见机型屏幕参数

http://www.woshipm.com/screen/

1.8 二倍图
对于一张50x50的图片在标清屏下打开，1css像素=1个物理像素

如果在 Retina 屏幕中打开，在单一方向上，1css像素=2个物理像素，这样会造成图片模糊

解决方案就是使用倍图提高图片质量，解决在高清设备中存在的模糊问题

核心思路

比如希望在手机屏幕中显示一张100x100的图片
先制作一张200x200 的图片
通过css设置其逻辑尺寸为100x100
高清屏下手机浏览器会放大2倍显示，正好是200x200，正好是图片本身尺寸
注意：放大2倍，并不是图片的css尺寸放大2倍，而是使用2倍的物理像素点显示图片，会造成图片中的暗区等都爆露出来，造成模糊效果

2.2 视觉视口 visual viewport
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

2.3 理想视口 ideal viewport
很明显，布局视口>视觉视口，所以会在视觉视口中出现横向滚动条

但，很明显，这种体验差爆了

没有浏览器会这么做，而是，将网页内容进行缩放，缩放到在视觉视口中可以完全显示，造成的结果就是文字以及图片等变小，用户体验也是差爆了

理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定

需要设置 meta 标签进行设置

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

2.4 meta标签（理想视口的设定）
2.4.1 宽度设定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <style>
        .box{
            width: 300px; 
            height: 300px;
            background-color: #000;         
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

注意将自动生成的下面代码删除