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 取值分类
Ø 数值(整数)
注意 : 只占用父盒子剩余尺寸
