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

一,移动端特点

1.移动端和PC端网页不同点

PC端网页和移动端网页的有什么不同？
➢ PC屏幕大，网页固定版心
➢ 手机屏幕小， 网页宽度多数为100%

如何在电脑里面边写代码边调试 移动端 网页效果？
➢ 谷歌模拟器

2.分辨率

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

. 2分辨率
PC分辨率 :
➢ 1920 * 1080
➢ 1366 * 768
缩放150% :
➢（1920/150%）*（1080/150%）
总结 :
硬件分辨率（出厂设置）
缩放调节的分辨率（软件设置）

移动端主流设备分辨率 :
分辨率分类
➢ 物理分辨率是生产屏幕时就固定的，它是不可被改变的
➢ 逻辑分辨率 是由软件（驱动）决定的

3.视口

.1 使用meta标签设置视口宽度，制作适配不同设备宽度的网页
➢ 手机屏幕尺寸都不同， 网页宽度为100%
➢ 网页的宽度和逻辑分辨率尺寸相同。
➢ 默认情况下,网页的宽度和逻辑分辨率不同， 默认网页宽度是980px。

.2 案例
目标：网页宽度和设备宽度(分辨率)相同。
解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸。

理想视口标签：meta:vp
        width=device-width ---- 设备的宽度和视口(页面)宽度相等
        initial-scale=1.0 ---- 表示现在写多少像素，在页面之中就展示多少像素，不缩放
        minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防
        止页面布局被打乱
        
布局视口：移动端默认的页面宽度是980px，在没有视口标签的情况下        

.3 标签属性
viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

4.二倍图

.1 能够使用像素大厨软件测量二倍图中元素的尺寸
图片分辨率, 为了高分辨率下图片不会模糊失真
现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿
二倍图设计稿尺寸：750px

二,百分比布局-Flex布局

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

2. Flex布局

.1能够使用Flex布局模型灵活、快速的开发网页

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

.2 Flex布局的效果

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

设置方式
父元素添加** display: flex**，子元素可以自动的挤压或拉伸

组成部分
弹性容器 弹性盒子 主轴 侧轴 / 交叉轴
弹性容器 display: flex ;
默认的宽度和父元素一样,默认高度由内容撑开
弹性盒子: 弹性容器的最近一级子元素(亲儿子子元素)
1. 默认的宽度由内容撑开, 默认的高度为父元素的高度(侧轴方向是默认拉伸)
2. 没有块级, 行内, 行内块之分,统统的都是弹性盒子(可以直接设置宽高,并且一行显示多个)
3. 默认不换行,宁愿减少自己的宽度,也不会自动换行

.3 主轴对齐方式

使用 justify-content 调节元素在主轴的对齐方式
思考：网页中，盒子之间有距离吗？
答：有。
Ø 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距

修改主轴对齐方式属性: justify-content

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

.4 侧轴对齐方式

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

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

.5 伸缩比

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

.父元素{ display: flex; }
.子元素{ flex: 数值; }
伸缩比：flex 给弹性盒子添加
       1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
       2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
浮动不能和df一起使用的
  基础班学的属性，除了浮动不能配合df使用以外，其他的都可以

总结 :
1.弹性容器设置的属性: df, jc, ai
2.弹性盒子设置的属性：align-self，flex