web第三天--移动端特点，百分比，flex布局

移动端特点

一、移动端和PC端网页不同点

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

二、谷歌模拟器

1.使用谷歌模拟器调试移动端网页
2.可以选择设备型号，开发尺寸

三、分辨率

1.屏幕尺寸
指的是屏幕对角线的长度，一般用英寸来度量
2.物理分辨率/设备分辨率
指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件(驱动)改变，出厂就固定了的
3.逻辑分辨率
指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的
4.物理像素点
显示图像最小单位
5.PPI
单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰

微信截图_20220404192510.png

四、视口

1.使用meta标签设置视口宽度，制作适配不同设备宽度的网页
2.理想视口标签：meta:vp
①width=device-width ---- 设备的宽度和视口(页面)宽度相等
②initial-scale=1.0 ---- 表示现在写多少像素，在页面之中就展示多少像素，不缩放
③minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱

微信截图_20220404192422.png

3.布局视口：移动端默认的页面宽度是980px，在没有视口标签的情况下

五、二倍图

1.能够使用像素大厨软件测量二倍图中元素的尺寸
2.图片分辨率, 为了高分辨率下图片不会模糊失真

百分比布局/流式布局

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

微信截图_20220404192133.png

Flex布局/弹性布局

一、目标

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

二、作用

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

三、特点

1.是一种浏览器提倡的布局模型
2.布局网页更简单、灵活
3.避免浮动脱标的问题

四、设置方式

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

五、组成部分

1.弹性容器display:flex;

2.弹性盒子
弹性容器的最近一级子元素(亲儿子子元素)
①默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
②没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)；
③默认不换行，宁愿牺牲自己的宽度，都不会自动换行

微信图片_20220404192343.png

3.主轴justify-content
①flex-start 默认值，从父元素的左边开始显示
②flex-end，让弹性盒子整体，显示在弹性容器的右侧
③center，让弹性盒子整体，显示在弹性容器的中间
④space-around，让空白空间环绕在弹性盒子的两侧，第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2
⑤space-between，让空白空间分布在弹性盒子与弹性盒子之间---第一个和最后一个弹性盒子离弹性容器的距离为0
⑥space-evenly，弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等

微信图片_20220404191812.png

4.侧轴 / 交叉轴align-items
①center
②start
③flex-end
④stretch 垂直拉伸，沿着侧轴方向拉伸弹性盒子的高度直到父元素一样高，需要删除子元素高度才有效果
align-self（给弹性盒子设置）

微信图片_20220404192256.png

六、总结

弹性容器设置的属性：display: flex;，justify-content，align-items
弹性盒子设置的属性：align-self，flex
浮动不会和df一起使用的
基础班学的属性，除了浮动不能配合df使用以外，其他的都可以

七、伸缩比

属性flex : 值
只占用父盒子剩余尺寸
flex给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度

css省略号攻略

微信图片_20220404192601.png