移动端特点 , 百分比布局 , Flex布局

移动端和PC端网页不同点

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

谷歌模拟器

目标：使用谷歌模拟器调试移动端网页

屏幕尺寸

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

分辨率

Ø 硬件分辨率（出厂设置）
Ø 缩放调节的分辨率（软件设置）

分辨率分类

Ø 物理分辨率是生产屏幕时就固定的，它是不可被改变的
Ø 逻辑分辨率是由软件（驱动）决定的（制作网页参考）

视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
手机屏幕尺寸都不同， 网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同。
l 目标：网页宽度和设备宽度(分辨率)相同。
l 解决办法：添加视口标签。
l 视口：显示HTML网页的区域，用来约束HTML尺寸。
viewport：视口
l width=device-width：视口宽度 = 设备宽度
l initial-scale=1.0：缩放1倍（不缩放）

二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸

百分比布局

目标： 能够使用百分比布局开发网页
百分比布局， 也叫流式布局
l 效果： 宽度自适应，高度固定

Flex布局

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

作用

Ø 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Ø Flex布局非常适合结构化布局

设置方式

Ø 父元素添加 display: flex，子元素可以自动的挤压或拉伸

组成部分

Ø 弹性容器
Ø 弹性盒子
Ø 主轴
Ø 侧轴 / 交叉轴

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式
修改主轴对齐方式属性: justify-content
主轴对齐方式
目标：使用justify-content调节元素在主轴的对齐方式
属性值 -------------- 作用
flex-start ---------------默认值, 起点开始依次排列
flex-end ------------------终点开始依次排列
center------------------ 沿主轴居中排列
space-around --弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between --弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly ----弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性:
Ø align-items（添加到弹性容器）
Ø align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
属性值 ----------作用
flex-start -----默认值, 起点开始依次排列
flex-end ------终点开始依次排列
center------ 沿侧轴居中排列
stretch------- 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

伸缩比

目标：使用flex属性修改弹性盒子伸缩比
l 属性
Ø flex : 值;
l 取值分类
Ø 数值(整数)
注意 : 只占用父盒子剩余尺寸