PC端网页和移动端网页的不同
1.PC屏幕大，网页固定版心
2.手机屏幕小， 网页宽度多数为100%
如何在电脑里面边写代码边调试移动端网页效果？
谷歌模拟器
**打开谷歌浏览器,f12进入调试模式,点击下面片面的红色方框出按钮,进入手机模拟器
屏幕尺寸
1.指的是屏幕对角线的长度，一般用英寸来度量
分辨率
1.硬件分辨率（出厂设置）
2.缩放调节的分辨率（软件设置）
分辨率分类
- 物理分辨率是生产屏幕时就固定的，它是不可被改变的
- 逻辑分辨率是由软件（驱动）决定的
制作网页参考逻辑分辨率
视口
目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
1.手机屏幕尺寸都不同， 网页宽度为100%
2.网页的宽度和逻辑分辨率尺寸相同。
：默认情况下，网页的宽度和逻辑分辨率相同吗？
Ø 不同， 默认网页宽度是980px
1.目标：网页宽度和设备宽度(分辨率)相同。
2.解决办法：添加视口标签。
3.视口：显示HTML网页的区域，用来约束HTML尺寸
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-----------禁止用户缩放页面,防止页面布局被打乱
二倍图
目标：能够使用像素大厨软件测量二倍图中元素的尺寸
百分比布局
1.百分比布局， 也叫流式布局
2.效果： 宽度自适应，高度固定。
Flex布局
Flex布局/弹性布局：
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单、灵活
Ø 避免浮动脱标的问题
组成部分
Ø 弹性容器
Ø 弹性盒子
Ø 主轴
Ø 侧轴 / 交叉轴
弹性布局
1.只需给父元素赋予display:flex即可;
2.赋予了display:flex的盒子就是弹性容器;
3.在弹性容器里面的最近一级子元素就是弹性盒子;
弹性容器
默认宽度和父元素宽度一样,默认的高度由内容所撑开
弹性盒子
1，默认宽度由内容撑开
2，默认高度为弹性容器(最近一级的父元素)高度（侧轴方向默认是拉伸）
3，弹性盒子没有块级，行内，行内快之分，全部都叫弹性盒子（可以直接设宽高，一行显示多个）
4，弹性盒子默认不换行，当一行盒子过多，盒子宽度会被牺牲，弹性盒子过多，超多父元素后，会超出父元素（弹性容器）
5, 弹性容器的最近一级子元素（亲儿子）
主轴对齐方式
目标：使用justify-content调节元素在主轴的对齐方式
justify-content:flex-start;
侧轴对齐方式
目标：使用align-items调节元素在侧轴的对齐方式
