平时我们使用的 windows 系统有一个叫做`cmd` 的东西，大部分人可能几乎永远不会遇到使用`cmd`的情景； Linux 操作系统下有同类型的`bash`， OS X 下有`Terminal`。我们常称呼这三样东西为`Terminal`（终端）或`shell`。



那么这些`Terminal`有什么作用呢？简单的表述就是：用命令行的方式代替图形界面的键鼠操作！

> windows系统下的`cmd`不是很好用，建议安装`cmder`，比系统自带的要强大很多。全安装版 `cmder` 自带了 `msysgit`, 压缩包 23M, 除了 `git` 本身这个命令之外, 里面可以使用大量的 `linux` 命令。详细的安装使用教程可以参考：
>
> -   [逆天神器cmder](http://bg.biedalian.com/2014/09/11/cmder.html)
> -   [Win下必备神器之Cmder](https://www.jeffjade.com/2016/01/13/2016-01-13-windows-software-cmder/)
> -   [cmder官网](http://cmder.net/)

* * *

本文介绍一些在生活中最最常用操作（诸如：新建、删除文件与文件夹、打印文档树和关机等）的命令行实现方式。

如何打开`cmd`呢？

> 方法0：开始菜单里面找`cmd`命令提示符；
> 方法1：`win`+`r`组合键打开运行栏，键入`cmd`，回车；
> 方法2：`shift`+**鼠标右键** ，选择 **在此打开命令提示符**
> ...

`cmd`由 **命令** 和 **参数** 组成，每个参数对应不同的实现效果，同时正确地使用多个参数可以实现效果的叠加。在`cmd` 键入`help` 并回车可查看 **`cmd`可用命令列表**，使用 **`help + 命令名`** 可查看该命令的介绍、参数列表与使用方法。


## 定时关机操作

*   有关命令：`shutdown`
*   有关参数：`/s`　 `/t xxx`
*   用法实例：`shut /s /t 3600`　　一小时后关机
*   说　　明：`shutdown`命令不仅可以用来设置定时关机，`shutdown`命令还有其他很多其他参数，`/l` `/r` `/g` `/h` 等，可以用于睡眠、注销与重启操作。进一步了解用法，请在`cmd`里键入 `help shutdown` 进行查询。


## 目录跳转

*   有关命令：`cd`
*   有关参数：文件夹路径
*   用法实例：`cd /D d:/demo`=`d:`+`cd demo`
*   说　　明：切换当前`cmd`的工作路径到 `D` 盘的 `demo` 文件夹下；路径可用文件夹的相对路径也可以使用文件夹在磁盘的绝对路径。
    注意：`cd` 命令在不加`/D`参数时无法跨磁盘驱动器更改目录的，加上`/D`则可以在硬盘各个分区的各个位置切换。


## 新建文件夹

*   有关命令：`md`/`mkdir`
*   常用参数：新建文件夹名字
*   用法实例：`mkdir d:\demo`
*   说　　明：`mkdir d:\demo` 命令可以在`D`盘根目录下新建一个叫做`demo`的文件夹


## 删除文件夹操作

*   有关命令：`rd`
*   常用参数：文件夹所在位置/文件夹名
*   用法实例：`rd demo`
*   说　　明：删除`demo` 文件夹！
    注意：`rd`无法删除非空文件夹，所以这个命令是鸡肋！很容易搞得装逼不成反而浪费了自己的时间（`Linux` `Unix` 或者 `DOS` 下用命令删除文件夹则方便的多）


## 删除指定文件

*   有关命令：`del`　`erase`
*   常用参数：文件路径/文件名
*   用法实例：`del d:\demo\demo.txt`　`erase d:\demo\demo.txt`
*   说　　明：该命令会删除`D`盘`demo`目录下的`demo.txt`


## 查看文档树结构

*   有关命令：`tree`
*   常用参数：`/f` 文件夹路径/文件名
*   用法实例：`tree d:\demo`
*   说　　明：`tree d:\demo` 可以查看`demo`目录下的目录层级结构（不显示单独的文件），加上`/f`参数可以将单个文件也显示到文档树上。

```
// 使用tree命令生成的目录层级结构

E:.
├─css
├─fonts
│  └─icomoon
│      └─.font-spider
├─imgs
├─js
└─sass
    └─bootstrap
        └─mixins
```


## 导出运行结果到文本文档

有时候你想讲命令运行的结果发给别人看，你不想截图而想发送纯文本，奈何 `cmd` 无法像普通文本编辑器一样复制。（cmder是可以复制的）这时该怎么办？

> 情景：你想看看自己的移动盐盘里面都有哪些纪录片，当然这时你可以打开对应的文件夹，挨个点击查看，更好的办法是使用 `cmd` 来解决问题。

比如我的纪录片放在了`I:\影音`目录下，于是打开`cmd`输入：

```
I:\
cd I:\影音

I:\影音
tree /f 纪录片 > C:\Users\我的用户名\desktop\纪录片.txt
```

这时你会发现没有输出结果，但是打开桌面会发现多了一个`list.txt`，里面是所有的纪录片目录！ Excited！

```
// 示例：我的移动硬盘中的纪录片

I:\影音\纪录片
│  [《基础解剖学》.].Anatomy.For.Beginners.ep3[www.xuexi111.com].srt
│  [基础解剖学].Anatomy.for.Beginners.1.avi
│  [基础解剖学].Anatomy.for.Beginners.1.srt
│  植物王国-第一集.720p.BD中英双字幕.rmvb
│  植物王国-第三集.720p.BD中英双字幕.rmvb
│  植物王国-第二集.720p.BD中英双字幕.rmvb
│  
└─Planet Earth
        [行星地球01].Planet.Earth.01.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球02].Planet.Earth.02.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球03].Planet.Earth.03.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球04].Planet.Earth.04.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球05].Planet.Earth.05.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球06].Planet.Earth.06.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球07].Planet.Earth.07.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球08].Planet.Earth.08.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球09].Planet.Earth.09.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球10].Planet.Earth.10.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        [行星地球11].Planet.Earth.11.中文字幕.HR-HDTV.AC3.960X528.x264-人人影视.mkv
        行星地球2.Planet.earth.II.S01E01.中英字幕.HR-HDTV.AAC.1024X576.x264.mp4
        行星地球2.Planet.earth.II.S01E02.中英字幕.HR-HDTV.AAC.1024X576.x264.mp4
        行星地球2.Planet.earth.II.S01E03.中英字幕.HR-HDTV.AAC.1024X576.x264.mp4
        行星地球2.Planet.earth.II.S01E04.中英字幕.HR-HDTV.AAC.1024X576.x264.mp4
        行星地球2.Planet.earth.II.S01E05.中英字幕.HR-HDTV.AAC.1024X576.x264.mp4
        行星地球2.Planet.earth.II.S01E06.END.中英字幕.HR-HDTV.AAC.1024X576.x264.mp4
```

我们注意到命令运行没有结果出现在`cmd`对话框里，原因在于**转向符** `>`，这个符号的意思是：将命令运行的结果转向导出到特定目录下的特定文本文档（原本没有该文本则会新建）。

## ipconfig

这个比较简单，就是获取本机详细网络配置信息。IP地址、子网掩码、网关等等。

* * *

对于一个程序员来说，一个操作系统好不好用一定会考虑命令行终端的使用方便程度，学会使用命令行终端也是程序员的必备修养。

在平时的生活中确实没必要用到这些晦涩的东西，但是一旦学会，将成为你装逼与提高生活质量的一大利器！

`cmd`的使用还远不止如此，可以百度`CMD 命令速查手册` 获取命令的在线学习，或者使用`cmd`自带的 `help`进行学习。

参考：[Windows 常用 CMD 命令介绍](https://www.zybuluo.com/yangfch3/note/173158)

Windows 常用 CMD 命令

其实就是一个官方的，一个野生的`(*￣3￣)╭`。跟西游记里面的神仙和妖怪差不多，编制内和编制外的问题。编制外的先出现，而且不比编制内的差！



## 遵循的模块化规范不一样

>   **模块化规范：**  即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初的 JavaScript 是那么的裸奔呢 —— 全局变量就是它的模块化规范。

require/exports 出生在野生规范当中，什么叫做野生规范？即这些规范是 JavaScript 社区中的开发者自己草拟的规则，得到了大家的承认或者广泛的应用。比如 CommonJS、AMD、CMD 等等。import/export 则是名门正派。TC39 制定的新的 ECMAScript 版本，即 ES6（ES2015）中包含进来。

## 出现的时间不同

require/exports 相关的规范由于野生性质，在 2010 年前后出生。AMD、CMD 相对命比较短，到 2014 年基本上就摇摇欲坠了。一开始大家还比较喜欢在浏览器上采用这种异步小模块的加载方式，但并不是银弹。随着 Node.js 流行和 Browsersify 的兴起，运行时异步加载逐渐被构建时模块合并分块所替代。Wrapper 函数再也不需要了。 2014 年 Webpack 还是新玩意，现在已经是前端必备神器了。

>   Browsersify、Webpack 一开始的目的就是打包 CommonJS 模块。

CommonJS 作为 Node.js 的规范，一直沿用至今。由于 npm 上 CommonJS 的类库众多，以及 CommonJS 和 ES6 之间的差异，Node.js 无法直接兼容 ES6。所以现阶段 require/exports 仍然是必要的。出自 ES6 的 import/export 相对就晚了许多。被大家所熟知和使用也是 2015 年之后的事了。 这其实要感谢 babel（原来项目名叫做 6to5，后更名为 babel） 这个神一般的项目。由于有了 babel 将还未被宿主环境（各浏览器、Node.js）直接支持的 ES6 Module 编译为 ES5 的 CommonJS —— 也就是 require/exports 这种写法 —— Webpack 插上 babel-loader 这个翅膀才开始高飞，大家也才可以称 " 我在使用 ES6！ "

>   这也就是为什么前面说 require/exports 是必要且必须的。因为事实是，目前你编写的 import/export 最终都是编译为 require/exports 来执行的。

## 输入输出形式不一样

require/exports 的用法只有以下三种简单的写法：

```JavaScript
const fs = require('fs')
exports.fs = fs
module.exports = fs

```

而 import/export 的写法就多种多样：

```JavaScript
import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'
```

## 输入输出本质上的差别

形式上看起来五花八门，但本质上：

1.  无论 CommonJS 还是 ES6 Module 输出都可以看成是一个具备多个属性或者方法的对象；
2.  default 是 ES6 Module 所独有的关键字，export default fs 输出默认的接口对象，import fs from 'fs' 可直接导入这个对象；
3.  ES6 Module 中导入模块的属性或者方法是强绑定的，包括基础类型；而 CommonJS 则是普通的值传递或者引用传递。

1、2 相对比较好理解，3 需要看个例子：

```JavaScript
// counter.js
exports.count = 0
setTimeout(function () {
  console.log('increase count to', exports.count++, 'in counter.js after 500ms')
}, 500)

// commonjs.js
const {count} = require('./counter')
setTimeout(function () {
  console.log('read count after 1000ms in commonjs is', count)
}, 1000)

//es6.js
import {count} from './counter'
setTimeout(function () {
  console.log('read count after 1000ms in es6 is', count)
}, 1000)

```

分别运行 commonjs.js 和 es6.js：

```JavaScript
➜  test node commonjs.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in commonjs is 0
➜  test babel-node es6.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in es6 is 1
```


------------

1.  ES6模块的设计思想，是尽量的静态化，使得`编译时`就能确定模块的依赖关系(“静态优化”)，以及输入和输出的变量。CommonJS和AMD模块，都只能在`运行时`确定这些东西(“运行时加载”)。

2.  ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。
CommonJS和AMD模块是一个对象。

3.  ES6模块加载的机制，与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。

    CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

4.  处理“循环加载”的方法是不一样的，返回的结果也不一样。

CommonJS模块的重要特性是加载时执行，即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

ES6模块是动态引用，如果使用`import`从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

ES6模块 和 CommonJS 的区别

如果你想成为一个行业最顶尖的高手，一万小时是最基础的门槛（《异类》），但其实学习时间和学习效果它是边际效益递减的，这意味着如果你想拿到80分，你可能只需要花一千小时，但是你想从80分到达98分，他也许就要花费你1万小时中剩下的9000小时。



但如果你只是相比80%甚至90%的普通人都做得更好，你只要做到80分就够了，这也是我们所谓的到达一个领域已经算厉害的状态，本文所讨论的就是如何达到80分！

### 第一步：快速入门

- 理论的大量输入
  - 注意信息来源（要靠谱、要干货多）
  - 可以查找豆瓣高评分的相关书籍、专业网站、视频、文档等
- 建立起思维导图，有一个全局观
  - 思维导图可以帮你理清脉络，避免遗漏知识点
  - 思维导图可以建两个，一个是入门级，可以粗糙一点，主要在抓脉络；另一个细节可以丰富一些，避免遗漏。
- 20小时学习法则：
  - 想明白你要学什么，先学会那些重要的核心的东西，就能在最短的时间内提升自己的表现。

### 第二步：大量练习

- 在吸收理论之后，去应用，知识 ≠ 技能，可能会花费你三个月甚至更长的时间。
- 最好的学习方式就是在实践中学习。看书是为了降低实践时的试错成本。但是出错是不可能避免的，只能降低概率。
- 前人已经帮你踩了很多坑，而且有一部分人乐于分享出来，可以把常见的坑收集整理一下。
- 有条件的情况下找一个导师，出错后及时修正。

### 补充：

- 越是能力不足，越该保持自信！
- 扩宽人际交往，去跟人交谈，进入领域的小圈子。
  - 有一些问题只有圈子内的人才会知道，群、论坛、交流会都可以
  - 不过这个的话效率可能会比较低

------------

其实不只是进入一个领域，学习任何新知识时这个方法都是可行的，都可以帮助你快速入门并超过大部分人。学会举一反三。

如何快速进入一个领域并变得很厉害

如何在git提交时自动忽略指定的文件。



## 起因

在使用git对软件进行版本管理的时候我们总有一些不需要提交到版本库里的文件和文件夹，或者在管理一个实际应用的开源项目的时候，不可以把带有数据库信息的文件上传到开源平台当中，这个时候我们就需要让git自动忽略掉一下文件。

## 关于.gitignore

为了让 git 忽略指定的文件和文件夹，我们需要在项目的`根目录`当中创建`.gitignore`文件。这个文件的名字还是挺好记的吧，由 git+ignore 两个单词组成，创建的过程当中不要忘记前面的点。

**注意：** 在windows当中创建这个`.gitignore`文件的时候可能会无法创建出来，因为windows的文件管理器强制要求有.后缀的文件应该有个文件名。这点不用担心，直接在文本编辑器或者IDE里保存这个文件就可以创建文件了。

## 使用 .gitignore

使用`.gitignore`文件的方式很简单，只需要在文件里输入你想忽略的文件的规则就可以了，下面举个例子。

比如我的项目想忽略掉`node_modules`这个文件夹，直接输入：

```
node_modules/
```

就可以了，再次 commit 的时候就会忽略掉这个文件夹。
如果想忽略一个文件比如忽略`oauth.json`，再输入：

```
oauth.json
node_modules/
```

这样就可以了。
如果想忽略掉所有的后缀为`.json`的文件，那么就输入：

```
*.json
oauth.json
node_modules/
```

那么这样所有的`.json`的文件就会被全部忽略，git就不会扫描和提交这些文件了。

## 总结

根据上面的实例我们总结，在`.gitignore`文件当中，一行代表一条忽略规则，如果是一个带`.`这种有后缀的字符串那么 git 就会忽略这个文件。`*`表示的就是选中所有，如果没有`.`就表示一个文件夹，上面的 node_modules 也可以不加`/`，`/`的主要目的是为了表示路径，比如你有可能想要忽略掉 node_modules/app 文件夹那么就会用到`/`。

另外[https://github.com/github/gitignore](https://github.com/github/gitignore) github提供了一个通用的`.gitignore`库，如果懒得自己设置，可以直接在这个库里找找有没有你想要的忽略文件。

------------

原文：http://www.jianshu.com/p/ade52455c3a4

git提交时忽略指定文件

移动端是趋势，移动端的屏幕显示和布局方面肯定是需要掌握的透透的。



> 注意：
> 本文章的图片出了些问题，还未修改。

## 像素 PX

其实很多会 Photoshop 的人都有一个误区：**认为像素是一个宽高相等的小方块，并且的像素都是“那么大”，但是不知道这个宽高的具体数字。**

然而其实 pixel（像素）是图像的基本采样单位。它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。

> 详细解释见维基 [像素](https://zh.wikipedia.org/wiki/%E5%83%8F%E7%B4%A0) 条目。

那么 px 都会受哪些因素的影响而变化？

*   每英寸点数(Dots Per Inch, DPI)
*   像素密度(pixel per inch, PPI)
*   设备像素比(device pixel ratio, DPR)

## 像素密度 PPI

### 物理像素

`物理像素(physical pixel)`又被称为`设备像素(device pixels)`，是设备能控制图像显示的最小单位，每个像素可以根据操作系统设置自己的颜色和亮度。

不同的设备，图像基本采样单元是不同的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为`ppi`和`dpi`：

-   **ppi**：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素或显示器设备的点距。
-   **dpi**：每英寸多少点。

关于打印机的墨点我们不去关心，只要知道 **当用于描述显示器设备时 ppi 与 dpi 是同一个概念** 。

### PPI

**每英寸物理像素点数（Pixels Per Inch）**，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。

ppi越高，每英寸像素点越多，图像越清晰。可以类比物体的密度，密度越大，单位体积的质量就越大，ppi越高，单位面积的像素越多。

要计算显示器的每英寸像素值，首先要确定屏幕的`尺寸（对角）`和`分辨率（物理像素）`。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/02px.png" style="max-height: 300px">

以爱疯6为例：

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/03px.png" style="max-height: 300px">

```
var 斜边尺寸 = V(1920^2+1080^2) V代表开根号
var ppi = 斜边尺寸/5.5
ppi = 401ppi

```

## 设备像素比 DPR

### CSS 像素

CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。

在`CSS`规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。`px`是一个**相对单位**，相对的是`设备像素(device pixel)`。

每一个CSS声明和几乎所有的 javascript 属性都使用CSS像素，因此实际上从来用不上设备像素 ，唯一的例外是`screen.width/height`.

CSS 像素又被称为`与设备无关的像素`或`设备独立像素`(device-independent pixel)，简称 `DIPs`。

### 缩放

在桌面端，`1个css像素`往往都是对应着电脑屏幕的`1个物理像素`。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/04px.png" style="max-height: 300px">

_一个CSS像素对应一个物理像素_

而在手机端，由于屏幕尺寸的限制，`缩放`是经常性的操作。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/05px.png" style="max-height: 300px">

_设备像素(深蓝色背景)、CSS像素(半透明背景)_
_左图表示当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素_
_右图表示当用户进行放大操作时，一个CSS像素覆盖了多个设备像素_

不论我们进行缩小或放大操作，元素设置的CSS像素（如width:300px）是`始终不变的`，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的.

### DPR

> **设备像素比(device pixels ratio)** 描述的是未缩放状态下，`物理像素`和`CSS像素`的初始比例关系，计算方法如下。

```
设备像素比 ＝ 物理像素 / 设备独立像素      // 同一方向上
```

通俗点讲：**设备像素比(dpr)** 是指在移动开发`同一方向上（x轴或y轴）`中`1个css像素`占用`多少设备像素`，

如 retina 屏幕`dpr = 2`，代表`1个css像素`用`2x2个设备像素`来绘制。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/06px.png" style="max-height: 300px">

在 JavaScript 中，可以通过`window.devicePixelRatio`获取到当前设备的 dpr。而在 CSS 中，可以通过`-webkit-device-pixel-ratio`，`-webkit-min-device-pixel-ratio`和`-webkit-max-device-pixel-ratio`进行媒体查询。

桌面浏览器像素比为 `1`，表示`一个CSS像素`对应`1个物理像素`。retina 屏幕以及绝大数现代移动浏览器的像素比为 `2`，表示`一个CSS像素`对应`4个物理像素`。部分大屏移动设备的像素比可以达到 `3 `或 `4`。

### ppi 和 dpr 的关系

毕竟这些参数是外国人先发明的，他们会优先选择自己熟悉的计量单位作为显示设备的工厂标准参数，因此`ppi`就用作显示设备的工业标准；

**dpr 与 ppi 相关，一般是`ppi/160`的整数倍：**

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/07px.png" style="max-height: 300px">


## Viewport

### PPK 关于三个 viewport 的理论

[ppk大神](http://www.quirksmode.org/) 对于移动设备上的viewport有着非常多的研究（[第一篇](http://www.quirksmode.org/mobile/viewports.html)，[第二篇](http://www.quirksmode.org/mobile/viewports2.html)，[第三篇](http://www.quirksmode.org/mobile/metaviewport/)），有兴趣的同学可以去看一下，本文中有很多数据和观点也是出自那里。ppk认为，移动设备上有三个viewport。

-   visual viewport / layout viewport

简单的理解，viewport 严格等于浏览器的窗口。为了能更好为移动端 CSS 布局服务，viewport 又分为 visual viewport 和 layout viewport。

George Cummins在 [Stack Overflow](http://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport) 上解释了这两个基本概念。

> 可以把 layout viewport 想象成是一张不能改变大小和角度的图片。现在你用一个更小的框来观看这张图片，这个框被不透明的材料包围，所以你只能看到这张图片的一部分，通过小框所看到的这部分区域被称为 visual viewport。你可以拿着这个框离图片远点（用户缩小页面）或近点（用户放大页面）进行观看，你也可以改变这个框的方向，但这张图片的大小和方向都不会改变。

`visual viewport`的宽度可以通过`window.innerWidth` 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/08px.png" style="max-height: 300px">
_viewport示意图_

-   ideal viewport

现在我们已经有两个`viewport`了：**layout viewport** 和  **visual viewport**。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的`viewport`。

所谓的完美适配指的是：
首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；
第二，显示的文字的大小是合适，比如一段 14px 大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段 14px 的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。

ppk把这个`viewport`叫做 **ideal viewport**，也就是第三个`viewport` —— 移动设备的理想`viewport`。

`ideal viewport`并没有一个固定的尺寸，不同的设备拥有有不同的`ideal viewport`。所有的`iphone`的`ideal viewport`宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在`iphone`中，`css`中的320px就代表`iphone`屏幕的宽度。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/09px.png" style="max-height: 300px">

但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备`ideal viewport`的宽度都为多少，可以到 [Viewport Sizes](http://viewportsizes.com/) 去查看一下，里面收集了众多设备的理想宽度。


### viewport meta

移动设备默认的`viewport`是`layout viewport`，但在进行移动设备网站的开发时，我们需要的是`ideal viewport`。那么怎么才能得到`ideal viewport`呢？这就该轮到`meta`标签出场了。

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的`head`标签中：

`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">`

该`meta`标签的作用是让当前`viewport`的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让`viewport`的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认`viewport`，也就是说会出现横向滚动条。

## BOM 属性

为了便于获取不同对象的尺寸，浏览器包含以下属性供我们使用：

*   `screen.width/height`，设备的屏幕尺寸。

*   `window.innerWidth/Height`，包含滚动条尺寸的浏览器完整尺寸。

*   `document.documentElement.clientWidth/Height`，viewport 的尺寸。

*   `document.documentElement.offsetWidth/Height`，`<html>`的尺寸。

你可能同时也会用到以下属性：

*   `window.pageX/YOffset`，页面的移位。

*   `window.pageX/Y`，从`<html>`原点到事件触发点距离。

*   `window.clientX/Y`，从 viewport 原点（浏览器窗口）到事件触发点的距离。

*   `window.screenX/Y`，从用户显示器窗口原点到事件触发点的距离。

## flexible.js

基于上述几个概念，阿里前端团队设计了 [flexible.js](https://github.com/amfe/lib-flexible) 这个移动端自适应方案，它主要做了下面几件事：

**1. 动态改写`<meta>`标签**

你可以通过输出 meta 标签方式来手动设置 dpr，其中 initial-dpr 会把 dpr 强制设置为给定的值，maximum-dpr 会比较系统的 dpr 和给定的 dpr，取最小值。`注意：这两个参数只能选其一。`

```
<meta name="flexible" content="initial-dpr=2, maximum-dpr=3" />

```

**2. 给`<html>`元素添加`font-size`属性，并且动态改写`font-size`的值**

为了以后兼容 vh，vw 单位，当前方案会把页面分成 100 份来看待，每一份被称为一个单位 a。同时，1rem 单位认定为 10a。拿 750 的视觉稿举例：

```
1a = 7.5px
1rem = 75px

```

因此，对于视觉稿上的元素的尺寸换算，只需要原始 px 值除以 rem 基准 px 值即可。例如 `240px * 120px` 的元素，最后转换为 3.2rem * 1.6rem。

**3. 给`<html>`元素添加`data-dpr`属性，并且动态改写`data-dpr`的值**

我们希望在大屏手机上看到更多的文字，所以字体的大小不推荐用 rem 作为单位。所以对于字体的设置，仍旧使用 px 作为单位，并配合用 data-dpr 属性来区分不同 dpr 下的的大小。

```
div {
    width: 1rem;
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}
```

## 参考文章

[深入理解移动端像素知识与Viewport知识](http://blog.csdn.net/aiolos1111/article/details/51967744)
[移动端H5页面的设计稿尺寸（上）](http://zikoman.lofter.com/post/3bf3bb_6da8d80#)
[移动端H5页面的设计稿尺寸（下）](http://zikoman.lofter.com/post/3bf3bb_6da8e55#)
[你真的了解像素吗](http://www.cnblogs.com/dojo-lzz/p/6683036.html?utm_source=debugrun&utm_medium=referral)
[移动前端开发之viewport的深入理解](http://www.cnblogs.com/2050/p/3877280.html)
[设备像素，设备独立像素，CSS像素](http://yunkus.com/physical-pixel-device-independent-pixels/)
[移动端开发系列——像素与viewport](http://www.jianshu.com/p/76130f4d7cf9)
[移动端高清、多屏适配方案](http://div.io/topic/1092?page=2)
[像素（px）到底是个什么单位](http://hax.iteye.com/blog/374323)
[CSS 长度单位](https://yukun.im/css/469)
[彻底理解 UI 及 Web 的尺寸单位：基本概念](https://medium.com/uxabc/understanding-ui-units-8acdc0575388)
[针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析](https://www.idaima.com/a/13245.html)