移动端特点
移动端与pc端网页的差别
pc端屏幕大,有固定版心.
移动端多数是手机,屏幕小,网页多数为百分比布局
分辨率
屏幕尺寸
指的是对角线的长度,一般用英寸度量
分辨率分类:
- 物理分辨率是生产屏幕时就固定的，它是不可被改变的
- 逻辑分辨率是由软件（驱动）决定的
视口
meta标签设置视口宽度，制作适配不同设备宽度的网页
默认网页宽度是980px
需求：网页宽度和设备宽度(分辨率)相同。
解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸。
视口代码
视口代码示例.png
viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）
二倍图
能够使用像素大厨软件测量二倍图中元素的尺寸
flex布局
优势:
- 是浏览器提倡的布局模型
- 布局网页更灵活, 简单
- 避免浮动脱标的问题
作用:
- 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
设置方式:
父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成:
flex模型构成.png
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属性修改弹性盒子伸缩比
flex : 值(整数)
注意 : 只占用父盒子剩余尺寸
