2022-04-04 移动端特点 flex布局

PC端网页和移动端网页的有什么不同点

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

如何在电脑里面边写代码边调试移动端网页效果？

谷歌模拟器

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

谷歌调试移动端

屏幕尺寸

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

分辨率

PC分辨率

1920 * 1080
1366 * 768
……

缩放150%

（1920/150%）*（1080/150%）

总结

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

了解移动端主流设备分辨率

分辨率分类

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

视口

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

1，手机屏幕尺寸都不同， 网页宽度为100%
2， 网页的宽度和逻辑分辨率尺寸相同。

视口.png

二倍图

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

1， 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
2， 二倍图设计稿尺寸：750px

二倍图.png

百分比布局

百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定

Flex布局

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

Flex布局/弹性布局作用

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

Flex布局模型构成

作用

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

l 设置方式

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

l 组成部分

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

flex模型结构图.png

主轴对齐方式

使用justify-content调节元素在主轴的对齐方式

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

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

主轴对齐方式.png

侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

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

侧轴对齐方式.png

伸缩比

属性

Ø flex : 值;

l 取值分类

Ø 数值(整数)
注意 : 只占用父盒子剩余尺寸