移动开发入门

移动开发入门

viewport

如果不禁止缩放

<meta name="viewport" content="width=device-width, initial-scale=1" />

如果禁止缩放

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"
/>

获取视口宽度

console.log(document.documentElement.clientWidth);
console.log(document.documentElement.getBoundingClientRect().width);

常用单位

px

绝对单位，当需要设置固定宽高时可用，也可用于设置字体大小

---

%

相对单位，可以用来设置宽度，流体布局中会用到

---

em

相对单位，设置字体大小时，1em=父元素字体的大小，设置其他，比如宽、高时，1em=自身字体的大小，一般用来控制行首的缩进，一般不用来布局

---

rem(root element html)

相对单位，1rem=根元素（html）的字体大小

---

vw/vh/vmax/vmin

相对单位，视口单位

1vw=视口宽度的 1%
1vh=视口高度的 1%
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

Flex

Flex 是 Flexible Box 的缩写，意为“弹性的盒子”，所以 Flex 布局一般也叫作“Flex 弹性布局”

任何一个 HTML 元素都可以指定为 Flex 布局
display: flex | inline-flex;

采用 Flex 布局的元素，称为 Flex 容器
Flex 容器的所有 子元素 自动成为容器成员，称为 Flex 项目

默认情况下，水平方向的是主轴，垂直于主轴方向的是交叉轴
Flex 项目默认沿主轴起始排列

容器的属性

flex-direction

决定主轴的方向（即 Flex 项目的排列方向）

flex-direction: row（默认值） | row-reverse | column | column-reverse;

row（默认值）：主轴为水平方向，起点在左端

1

2

3

4

row-reverse：主轴为水平方向，起点在右端

1

2

3

4

column：主轴为垂直方向，起点在上沿

1

2

3

4

column-reverse：主轴为垂直方向，起点在下沿

1

2

3

4

---

flex-wrap

默认情况下，Flex 项目都排在一条轴线上
flex-wrap 属性定义了如果一条轴线排不下，如何换行
flex-wrap: nowrap（默认值） | wrap | wrap-reverse;

nowrap（默认）：不换行

1

2

3

4

5

6

7

8

9

wrap：换行，第一行在上方

1

2

3

4

5

6

7

8

9

wrap-reverse：换行，第一行在下方

1

2

3

4

5

6

7

8

9

---

flex-flow

flex-direction 和 flex-wrap 的简写形式
flex-flow: <flex-direction> || <flex-wrap>; 默认值为 row nowrap

---

justify-content

定义了 Flex 项目在主轴上的对齐方式
justify-content: flex-start（默认值） | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐（flex-direction: row）

1

2

3

4

flex-end：右对齐（flex-direction: row）

1

2

3

4

center： 居中（水平居中）

1

2

3

4

space-between：Flex 项目之间的间隔都相等

1

2

3

4

space-around：每个 Flex 项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

1

2

3

4

---

align-items

定义了 Flex 项目在交叉轴上如何对齐
align-items: stretch（默认值） | flex-start | flex-end | center | baseline;

stretch（默认值）：如果 Flex 项目未设置交叉轴方向的大小或设为auto，将占满整个容器交叉轴方向的大小

1

2

3

4

flex-start：交叉轴的起点对齐

1

2

3

4

flex-end：交叉轴的终点对齐

1

2

3

4

center：交叉轴的中点对齐（垂直居中）

1

2

3

4

baseline: Flex 项目的第一行文字的基线对齐

1

2

3

4

---

align-content

定义了存在多根主轴线时，Flex 项目在交叉轴上如何对齐
如果项目只有一根主轴线，该属性不起作用
align-content: stretch（默认值） | flex-start | flex-end | center | space-between | space-around;

stretch（默认值）：主轴线平分 Flex 容器交叉轴方向上的空间

1

2

3

4

5

6

7

8

9

flex-start：与交叉轴的起点对齐

1

2

3

4

5

6

7

8

9

flex-end：与交叉轴的终点对齐

1

2

3

4

5

6

7

8

9

center：与交叉轴的中点对齐

1

2

3

4

5

6

7

8

9

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

1

2

3

4

5

6

7

8

9

space-around：每根轴线两侧的间隔都相等， 所以轴线之间的间隔比轴线与边框的间隔大一倍

1

2

3

4

5

6

7

8

9

---

项目的属性

order

定义了 Flex 项目的排列顺序

数值越小，排列越靠前，默认为 0
order: <integer>;

1

2

3

4

---

flex-grow

定义了 Flex 项目在主轴方向上的放大比例，默认为 0，即如果存在剩余空间，该项目也不放大
flex-grow: <number>;

1

2

3

---

flex-shrink

定义了 Flex 项目在主轴方向上的缩小比例，默认为 1，即如果空间不足，该项目将缩小
flex-shrink: <number>;

1

2

3

---

flex-basis

定义了在分配多余空间之前，Flex 项目占据的主轴大小（main size）
浏览器根据这个属性，计算主轴是否有多余空间
它的默认值为 auto，即项目的本来大小
flex-basis: <length>; | auto;

1

2

3

---

flex

是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto
flex: <flex-grow> || <flex-shrink> || <flex-basis>
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

---

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性
align-self: auto（默认值） | flex-start | flex-end | center | stretch | baseline;

1

2

3

4

5

6

rem和vw布局

类似与安卓autosize等比例计算