移动端特点
pc端与移动端的不同
-
pc端
- 屏幕大
- 固定版心
- flex布局有兼容性问题
-
移动端
- 屏幕小
- 网页宽度大多数为100%
- flex布局都可以兼容
分辨率
-
物理分辨率
- 屏幕大小
-
逻辑分辨率
- 由软件驱动决定
-
移动端宽度一般为320px - 750px
视口
- 适配不同设备宽度的网页
二倍图
- 适应视网膜屏
- 为了高分辨率下图片不会模糊失真
Flex布局
优点
- 灵活、快速开发网页
- 避免浮动脱标问题
给父元素添加
display：flex；
主轴对齐方式 justify-content：
-
：flex-start
- 默认值，起点一次排列
-
：flex-end
- 终点开始依次排列
-
：center
- 沿侧主轴居中排列
-
：space-between
- 两端对齐
-
：space-around
- 环绕元素对齐
-
：space-evenly
- 平均对齐
交叉轴（侧轴）对齐方式 align-items：
-
：flex-start
- 默认值，起点一次排列
-
：flex-end
- 终点开始依次排列
-
：center
- 沿侧轴居中排列
伸缩比
- flex：num；
- 类似分蛋糕（比例）
- 可以有固定宽度的元素，剩下的给没分到的
注意点
- flex主要用于移动端布局
- 高度给具体大小
- 宽度给比例
