【移动web】Flex布局模型、移动适配、响应式网页

一、移动端特点

1.1 PC端网页和移动端网页的不同

PC端屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

1.2 如何调试

谷歌模拟器

1.3 分辨率

1、屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量
2、分辨率分类：
-物理分辨率是生产屏幕时就固定的，不可改变（硬件）
-逻辑分辨率是由软件（驱动）决定的
3、制作网页参考的是逻辑分辨率
4、了解移动端主流设备分辨率

1.4 视口

1、场景：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
2、代码：html骨架中自带

1.5 百分比布局（流式布局）

效果：宽度自适应，高度固定

二、Flex布局

2.1 Flex布局简介

flex布局/弹性布局：
-是一种浏览器提倡的布局模型
-布局网页更简单、灵活
-避免浮动脱标的问题

2.2 Flex布局模型构成

作用：基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
-Flex布局非常适合结构化布局
设置方式：父元素添加display:flex，子元素可以自动地挤压或拉伸
组成部分：弹性容器、弹性盒子、主轴、侧轴

2.3 主轴对齐方式

场景：使用justify-content调节元素在主轴的对齐方式
-Flex布局模型之中，通过调节主轴或侧轴的对齐方式来设置盒子之间的间距

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

2.4 侧轴对齐方式

场景：使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性：
-align-items（添加到弹性容器）
-align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

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

2.5 伸缩比

属性：flex:值;
属性值：数值（整数）
注意：只占用父盒子剩余尺寸

2.6 主轴方向

场景：使用flex-direction改变元素排列方向
-主轴默认是水平方向，侧轴默认是竖直方向
-修改主轴方向属性：flex-direction

属性值	作用