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

flex 青蛙小游戏

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

Flex 布局

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

display: flex;

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

主侧轴方向

解决盒子排列方向问题。

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

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

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

属性值	作用
row	行，水平（默认值）
column	列，垂直
row-reverse	行，从右到左
column-reverse	列，从下到上

对齐方式

解决盒子排列位置问题。

主轴对齐方式

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

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	重点开始依次排序
center	沿主轴居中排列
space-around	弹性盒沿主轴均匀排序，空白间距均分在弹性盒两侧
space-between	弹性盒沿主轴均匀排序，空白间距均分在相邻盒子之间
space-evenly	弹性盒沿主轴均匀排序，弹性盒与容器之间间距相等

侧轴对齐方式

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

属性值	作用
flex-start	默认值：起点开始依次排序
flex-end	重点开始依次排序
center	沿侧轴居中排序
stretch	默认值，弹性盒沿主轴线被拉伸至铺满容器

align-self: flex-start;

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

弹性盒换行

解决盒子换行问题。

默认值是 nowrap不换行。

flex-wrap: wrap;

调整独立行对齐方式

align-content: space-between;

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	重点开始依次排序
center	沿主轴居中排列
space-around	弹性盒沿主轴均匀排序，空白间距均分在弹性盒两侧
space-between	弹性盒沿主轴均匀排序，空白间距均分在相邻盒子之间
space-evenly	弹性盒沿主轴均匀排序，弹性盒与容器之间间距相等

排列顺序

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

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

order: 1;

伸缩比

解决盒子尺寸问题。

扩充

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

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

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

flex-grow: 0;

压缩

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

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

flex-shrink: 1;

flex-basis

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

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

属性值	说明
length	用长度值来定义宽度。不允许负值
percentage	用百分比来定义宽度。不允许负值
auto	无特定宽度值，取决于其它属性值
content	基于内容自动计算宽度

简写

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

flex: 1 0 100px;

移动端适配

长度单位

像素

单位：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" />

属性	说明
width=device-width	设置视口宽度等于设备的宽度
initial-scale=1.0	初始缩放比例，1不缩放
maximum-scale	允许用户缩放到的最大比例
minimum-scale	允许用户缩放到最小比例
user-scalable	用户是否可以手动缩放
viewport-fit: contain 或 cover	视口适配，兼容刘海屏。

屏幕尺寸

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

分辨率和像素

分辨率分类：

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

像素分类：

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

注意：

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

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

CSS像素和设备像

PC端

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

移动端

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

二倍图

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