# 移动开发

## 常见分辨率

| 设备                   | 尺寸（英寸） | 物理分辨率     | 开发尺寸(px) | 物理像素与CSS像素比(dpr) |
| -------------------- | ------ | --------- | -------- | ---------------- |
| iPhone 3GS           | 3.5    | 320*480   | 320*480  | 1                |
| iPhone 4/4s          | 3.5    | 640*960   | 320*480  | 2                |
| iPhone 5/5s          | 4      | 640*1136  | 320*568  | 2                |
| iPhone 6/6s          | 4.7    | 750*1334  | 375*667  | 2                |
| iPhone6 Plus/6s Plus | 5.5    | 1242*2208 | 414*736  | 3                |

## viewport 视口

* layout viewport 布局视口:  早期解决 pc 网页在手机上展示的问题, 一般是 980 px
* visual viewport 视觉视口: 用户能看到的网站区域
* ideal viewport 理想视口: 讲布局视口为视觉视口, 通过 meta 标签通知浏览器

```html
"<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">"
```

最标准的viewport设置

* 视口宽度和设备保持一致
* 视口的默认缩放比例1.0
* 不允许用户自行缩放
* 最大允许的缩放比例1.0
* 最小允许的缩放比例1.0

### 移动端的特殊样式

```css
/*CSS3盒子模型*/
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 /*点击高亮我们需要清除  设置为transparent 完成透明*/
 -webkit-tap-highlight-color: transparent;
 /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
 -webkit-appearance: none;
 /*禁用长按页面时的弹出菜单*/
 img,a { -webkit-touch-callout: none; }
```

## 移动端常见布局

* 流式布局: 也就是百分比布局
* flex 弹性布局
* less + res 媒体查询
* 混合布局

### 百分比布局

### vw vh

* vw viewport width 视口宽度
* vh viewport height 视口高度

### flex 布局

https://ruanyifeng.com/blog/2015/07/flex-grammar.html

#### 容器的属性

* flex-direction：设置主轴的方向
    * `flex-direction: row | row-reverse | column | column-reverse;`
* flex-wrap：设置子元素是否换行  
    * `flex-wrap：nowrap | wrap | wrap-reverse;
* flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
    * `flex-flow: <flex-direction> || <flex-wrap>;`
* justify-content：设置主轴上的子元素排列方式
    * `justify-content: flex-start | flex-end | center | space-between | space-around;`
    * between 是左中右, around 是三等距
* align-items：设置侧轴上的子元素排列方式（单行）
    * `align-items: flex-start | flex-end | center | baseline | stretch;`
* align-content：设置侧轴上的子元素的排列方式（多行）
    * `align-content: flex-start | flex-end | center | space-between | space-around | stretch;

#### 项目的属性

* `flex-grow: <number>;` 项目的放大比例 (===占用剩余的比例===), 默认 0
    * 如果一个项目为 2, 其它为 1, 那么它占用剩余空间的比例是其它的两倍
* `flex-shrink: <number>;` 项目的缩小比例, 默认为 1
    * 如果空间不足, 该项目将缩小.
    * 如果多个项目都为 1, 那么空间部足将等比缩小.
    * 如果一个为 0, 其它为 1, 那么空间不足, 为 0 的不缩小
* `flex-basis: <length> | auto;` 在分配多余空间之前，项目占据的主轴空间，默认值 auto
    * 可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
* `flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];` 是 flex-grow  flex-shrink  flex-basis 的缩写
    * 有两个快捷值 auto (1 1 auto) 和 none (0 0 auto), 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
* `order: int;` 属性定义子项的排列顺序, 默认为 0, 数值越小, 越靠前
* `align-self: auto | flex-start | flex-end | center | baseline | stretch;`  控制子项自己在侧轴的排列方式, 覆盖掉 `align-items`

### rem 布局

> root em 相对 html 根字体大小的百分比
> 根元素（html）设置font-size=12px; 非根元素设置width: 2rem; 则换成px表示就是24px

#### 媒体查询

```css
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
```

* 查询类型:  `all` 所有设备 `print` 打印机 `scree` 电脑平板手机
* 关键字 `and not only` 将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
* 特性: width min-width max-width

书写顺序:   从低分辨率到高(推荐), 或者从高到低.

```css
/* 第一档x<540, 第二档540=<x<970, 第三档x>=970 */
@media screen and (max-width: 539px) {
    body {
      background-color: pink;
    }
}
@media screen and (min-width: 540px) {
    body {
      background-color: green;
    }
}
@media screen and (min-width: 970px) {
    body {
      background-color: green;
    }
}

/* screen and 不能省略 */
/* 媒体查询最好从小到大*/
```

####  淘宝的方案 flexible

**有 vw vh, 不再需要了**

> 10 等分, 每一份 rem 等于视口的 1/10 px

github地址：https://github.com/amfe/lib-flexible

* 需要装 vscode 插件 cssrem 自动转换

```less
/* 为了整体的效果更佳的美观，我们需要写死小于320px屏幕 大于750px 的字体大小  */
@media screen and (max-width: 320px) {
  html {
    font-size: 32px !important;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}
```

### bootstrap 响应式布局

中文网: http://www.bootcss.com/

官网: http://getbootstrap.com/

推荐网站 http://bootstrap.css88.com/

#### 栅格系统

特点:

* 媒体查询从小到大写
* 小屏幕的样式写了, 宽屏幕的样式没写, 切换到宽屏幕时会应用小屏幕的样式
* 小屏幕的样式写了, 宽屏幕的样式也写了, 切换到宽屏幕时只会应用宽屏幕的样式

规则:

* 按照不同屏幕划分为1~12 等份
* 行（row） 可以去除父容器作用15px的边距
* xs-extra small：超小； sm-small：小；  md-medium：中等； lg-large：大；
* 列（column）大于 12，多余的"列（column）"所在的元素将被作为一个整体另起一行排列
* 每一列默认有左右15像素的 padding
* 可以同时为一列指定多个设备的类名，以便划分不同份数  例如 class="col-md-4 col-sm-6"