移动web 03-day(移动端特点\百分比布局\Flex布局)

1.移动端特点

01-移动端和PC端网页不同点

1.png

02-谷歌模拟器:pc端转换成移动端后,要把网页刷新一遍

2.png

03-分辨率
1.屏幕尺寸：指的是屏幕对角线的长度，单位一般为英寸；

.物理分辨率/设备分辨率：指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件(驱动)改变，出厂就固定了的；

.逻辑分辨率：指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的

.物理像素点：显示图像最小单位

PPI：单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰

2.

3png

3.

4.png

4.

5png

5.

6png

04-视口 : 使用meta标签设置视口宽度，制作适配不同设备宽度的网页

1.默认在没有视口标签的情况下,网页的宽度和逻辑分辨率不同,移动端默认的页面宽度是980px

7.png

8.png

9.png

05-二倍图: 为了高分辨率下图片不会模糊失真

10.png

2.百分比=流式布局

百分比布局,也叫流式布局
特点:宽度自适应,高度固定
缺点:不够灵活

3.Flex布局=弹性布局

Flex布局也叫弹性布局

01-Flex布局介绍

11png

02-Flex布局模型构成及其优点和设置方式

.在Flex布局模型中，是通过调节主轴或侧轴的对齐方式来设置盒子之间的间距。

12.png

添加弹性布局:给父盒子添加 display:flex; (简写:df)

弹性容器 display:flex;默认宽度和父元素宽度一样，默认的高度由内容所撑开

弹性盒子：弹性容器的最近一级子元素(亲儿子子元素)

1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸);
.浮动不会和display:flex一起使用的,基础班学的属性，除了浮动不能配合df使用以外，其他的都可以
2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个);
3.默认不会自动换行，宁愿牺牲自己的宽度，都不会自动换行

03-Flex布局模型对齐方式
1.主轴对齐方式

13.png

2.侧轴对齐方式

14png

15.png

4.伸缩比

使用flex属性修改弹性盒子伸缩比

16png

17.png