udate img

22-前端工程化/02-项目设计与原理分析.md

@@ -40,7 +40,7 @@
 - 先整体后部分，再颗粒化。
 
 
-20180308_1603.png
+![](http://img.smyhvae.com/20180308_1603.png)
 
 上图中，整体指的是“布局”。
 
@@ -50,6 +50,7 @@
 
 
 20180308_1615.png
+![](http://img.smyhvae.com/20180308_1603.png)
 
 上图中，先看整体的布局，有哪些版块；具体的版块中，有横向列表、纵向列表；最后再是功能。
 
@@ -63,7 +64,7 @@
 **总结：**
 
 
-20180308_1620.png
+![](http://img.smyhvae.com/20180308_1620.png)
 
 三个模块：
 
@@ -128,7 +129,7 @@
 
 常见的dpi：
 
-20180308_1755.png
+![](http://img.smyhvae.com/20180308_1755.png)
 
 
 - **`ppi`**： Pixel per inch，每英寸的像素数。当用于描述显示器设备时ppi与dpi是同一个概念 。
@@ -142,7 +143,7 @@
 
 比如苹果的Retina视网膜显示屏，一个px需要两个物理像素来表示：
 
-20180308_1753.png
+![](http://img.smyhvae.com/20180308_1753.png)
 
 说白了，普通的显示器上，一个px对应的是硬件上的真实像素；但是在Retina屏上，比例是1:2（1个逻辑像素 需要 4个物理像素 来表示）。由此得出了**设备像素比**：
 
@@ -187,8 +188,8 @@ PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就
 
 **viewport分为三类：**
 
-20180308_1825.png
 
+![](http://img.smyhvae.com/20180308_1825.png)
 
 - layout viewport：可以理解成页面区域
 
@@ -236,7 +237,7 @@ PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就
 1、方式一：**History API**（HTML5中新增的）。很优雅，但对浏览器有要求。
 
 
-20180308_1925.png
+![](http://img.smyhvae.com/20180308_1925.png)
 
 必要条件：
 
@@ -252,14 +253,12 @@ PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就
 2、方式二：Hash。不是很优雅，但是兼容性好。
 
 
-20180308_1926.png
-
-
+![](http://img.smyhvae.com/20180308_1926.png)
 
 
 ## 构建工具的安装和配置
 
-20180308_1945.png
+![](http://img.smyhvae.com/20180308_1945.png)
 
 
 - `Webpack`：安装、配置。