一、移动端特点

1 移动端和PC端网页不同点

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

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

2 谷歌模拟器

3 分辨率

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

PPI单位英寸内的物理像素点个数，值越大，屏幕越清晰

分辨率分类

1.物理分辨率是生产屏幕时就固定的， 它是不可被改变的

2.逻辑分辨率是由软件(驱动)决定的

3.物理像素点是屏幕中 显示图像最小的单位，如屏幕中的

4.花花绿绿不同的颜色其实就是由一个个小物理像素点来构成的

4 视口

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

思考：默认情况下，网页的宽度和逻辑分辨率相同吗？不同， 默认网页宽度是980px

目标：网页宽度和设备宽度(分辨率)相同。

解决办法：添加视口标签。

视口：显示HTML网页的区域，用来约束HTML尺寸。

viewport：视口

width=device-width：视口宽度 = 设备宽度

initial-scale=1.0：缩放1倍（不缩放）

5 二倍图

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

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

二、百分比布局

图片分辨率, 为了高分辨率下图片不会模糊失真

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

三、Flex布局

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

1 Flex 布局模型构成

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

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

成部分弹性容器弹性盒子（亲儿子才是弹性盒子，且没有块、行内、行内块元素的概念，可以直接设置宽高）

主轴侧轴 / 交叉轴

注意：

1.亲儿子才是弹性盒子，且没有块、行内、行内块元素的概念，可以直接设置宽高

2.弹性容器默认宽度为父盒子宽度100%，默认高度由内容撑开

3.如果弹性盒子不设置高度，默认高度会和弹性容器一样高，默认宽度由内容撑开

2 主轴对齐方式

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

3 侧轴对齐方式

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

4 伸缩比

属性

flex : 值;

取值分类

数值(整数)

注意 :

1.只占用父盒子剩余尺寸

2.需要在弹性容器下的弹性盒子内设置