移动web第三天-------移动端特点flex布局

PC端网页和移动端网页的不同

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

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

谷歌模拟器
**打开谷歌浏览器,f12进入调试模式,点击下面片面的红色方框出按钮,进入手机模拟器

image.png

屏幕尺寸

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

分辨率

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

分辨率分类

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

视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
1.手机屏幕尺寸都不同， 网页宽度为100%
2.网页的宽度和逻辑分辨率尺寸相同。
：默认情况下，网页的宽度和逻辑分辨率相同吗？
Ø 不同， 默认网页宽度是980px
1.目标：网页宽度和设备宽度(分辨率)相同。
2.解决办法：添加视口标签。
3.视口：显示HTML网页的区域，用来约束HTML尺寸

视口标签.png

viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

理想视口标签(meta)
initial-scale=1.0,初始规模,盒子宽高有多少显示都少,不缩放
minimum-scale=1.0,mxamum-scale=1.0,user-scale=0-----------禁止用户缩放页面,防止页面布局被打乱

二倍图

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

例子.png

百分比布局

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

移动端百分比布局例子.png

Flex布局

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

组成部分

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

弹性布局

1.只需给父元素赋予display:flex即可;
2.赋予了display:flex的盒子就是弹性容器;
3.在弹性容器里面的最近一级子元素就是弹性盒子;

弹性容器

默认宽度和父元素宽度一样,默认的高度由内容所撑开

弹性盒子

1，默认宽度由内容撑开
2，默认高度为弹性容器(最近一级的父元素)高度（侧轴方向默认是拉伸）
3，弹性盒子没有块级，行内，行内快之分，全部都叫弹性盒子（可以直接设宽高，一行显示多个）
4，弹性盒子默认不换行，当一行盒子过多，盒子宽度会被牺牲，弹性盒子过多，超多父元素后，会超出父元素（弹性容器）
5, 弹性容器的最近一级子元素（亲儿子）

弹性容器和弹性盒子.png

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式
justify-content:flex-start;

主轴对齐语法.png

侧轴对齐方式

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

侧轴对齐案例.png

align-items.png