移动Web：Flex布局、移动端适配、视口、二倍图

flex 青蛙小游戏

• 外网：https://flexboxfroggy.com/
• 中文网：https://www.css88.com/tool/flexboxfroggy/#zh-cn

Flex 布局

布局模型、避免浮动脱标问题。

display: flex;
1

设置方式：给父元素添加 display: flex; 子元素可以自动的挤压或拉伸。

主侧轴方向

解决盒子排列方向问题。

默认水平方向是主轴，垂直方向是侧轴。

项目始终跟着主轴进行排列，使用 flex-direction 来修改谁是主轴。

flex-direction: row;	/* 默认水平方向是主轴：水平排列 */
flex-direction: column;	/* 修改垂直方向为主轴：垂直排列 */
1
2

对齐方式

解决盒子排列位置问题。

主轴对齐方式

justify-content: flex-start;	/* 默认值：起点开始依次排序 */
1

侧轴对齐方式

align-items: flex-start;	/* 默认值：起点开始依次排序 */
1

align-self: flex-start;
1

（设置给子元素） 可以单独控制其在侧轴的对齐方式，属性值和 align-items 一样。

弹性盒换行

解决盒子换行问题。

默认值是 nowrap不换行。

flex-wrap: wrap;
1

调整独立行对齐方式

align-content: space-between;
1

排列顺序

order 默认值是0，排序顺序是从小到大。

设置给项目，不是给容器。

order: 1;
1

伸缩比

解决盒子尺寸问题。

扩充

用数值来定义扩展比率。不允许负值。

设置 flex 项目扩充，默认是0不扩充。

数值是份数，计算公式是：盒子留白的宽度 / 所有份数和，计算每一份再进行比例计算。

flex-grow: 0;
1

压缩

用数值来定义收缩比率。不允许负值。

默认值是1，用于给子项设置。

flex-shrink: 1;
1

flex-basis

设置或检索弹性盒伸缩基准值。

如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。

简写

/ 语法格式:
flex: 放大 缩小 伸缩项宽度;
flex: flex-grow flex-shrink flex-basis;

flex: 1 0 100px;
1
2
3
4
5

移动端适配

长度单位

像素

单位：px

不会随着视口的大小变化而变化，像素是一个固定的 (绝对) 单位。

百分比

单位：%

动态单位，永远跟着元素的父元素作为参考进行计算。

注意：

• 子元素高度是参照父元素高度计算的。
• 子元素 padding 和 margin 无论是水平还是垂直方向，都是参考父元素宽度计算的。
• 不能用百分比设置元素的 border。

em

单位：em

动态单位，会随着参考元素字体大小的变化而变化（相对单位）。

注意：

• 当前元素设置了字体大小，那么就相当于当前元素的字体大小。
• 当前元素没有设置字体大小，那么就相当于第一个设置字体大小的祖先元素的字体大小。
• 如果当前元素和所有祖先元素都没有设置大小，那么久相当于浏览器默认的字体大小。

rem

单位：rem

动态单位，会随着 html 根元素字体大小的变化而变化（相对单位）。

vw 和 vh

动态单位，会随着网页视口大小的变化而变化（相对单位）。

系统会将视口的宽度和高度分为100份，1vw 就占用视口宽度的百分之一，1vh 就占用视口高度的百分之一。

区别：

• 百分比永远都是以父元素作为参考。vw 和 vh 永远都是以视口作为参考。

旋转之后，跟随屏幕旋转。

vmin 和 vmax

• vmin：vw 和 vh 中较小的那个
• vmax：vw 和 vh 中较大的那个

使用场景：保证移动开发中屏幕旋转之后尺寸不变。

视口

浏览器可视区大小。

• 在PC端，视口大小就是浏览器窗口可视区域的大小。
• 在移动端，视口大小并不等于窗口大小，移动端视口宽度被人为定义为 980。

移动端自动将宽度设置为980之后，可以看到整个网页。
但是由于移动端的物理尺寸（设备宽度）是远远小于视口宽度的。
所以为了能够在较小的范围内看到视口所有的内容，那么久必须将内容缩小。

移动端不自动缩放网页的尺寸

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

屏幕尺寸

屏幕对角线的长度，一般用英寸来度量。

分辨率和像素

分辨率分类：

• 物理分辨率 是生产屏幕时就固定的，它是不可被改变的。
• 显示分辨率 是由软件（驱动）决定的。

像素分类：

• 物理像素：描述物理分辨率使用的像素。
• 独立像素：描述显示分辨率所用到的像素。

注意：

物理像素纯粹是衡量屏幕质量的单位，与开发无关。

开发网页注重内容的显示，它使用的是独立像素或显示像素。

CSS像素和设备像

PC端

• 1个css像素对应电脑屏幕的1个物理像素。

移动端

• 最开始是1个css像素对应电脑屏幕的1个物理像素。
• 从 iPhone4 开始，乔布斯推出了所谓的 retina 视网膜屏幕，出现了 1个css像素占用2个物理像素。

二倍图

作用：图片分辨率，为了高分辨率下图片不会模糊失真。