一、移动端特点

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

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

2.了解移动端屏幕主流设备分辨率

• 屏幕尺寸：指的是屏幕对角线的长度，单位一般为英寸；
• 物理分辨率/设备分辨率：指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件(驱动)改变，出厂就固定了的；
• 逻辑分辨率：指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的
• 物理像素点：显示图像最小单位
• PPI：单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰

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

• 布局视口：移动端默认的页面宽度是980px
  使用meta标签设置视口宽度，制作适配不同设备宽度的网页；

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 理想视口标签：meta:vp
        width=device-width ---- 设备的宽度和视口(页面)宽度相等
        initial-scale=1.0 ---- 表示现在写多少像素，在页面之中就展示多少像素，不缩放
        minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱

二、百分比布局

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

三、Flex布局

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

1.flex的组成

• 添加弹性布局 display:flex; df
  弹性容器 display:flex;
  默认宽度和父元素宽度一样，默认的高度由内容所撑开
• 弹性盒子：弹性容器的最近一级子元素(亲儿子子元素)
  1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
  2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)；
  3.默认不换行，宁愿牺牲自己的宽度，都不会自动换行

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

image.png

/* flex-start 默认值，从父元素的左边开始显示 */
      justify-content: flex-start; 

/* flex-end 让弹性盒子整体，显示在弹性容器的右侧 */
      justify-content: flex-end;

 /* center 让弹性盒子整体，显示在弹性容器的中间 */
      justify-content: center;

 /* space-around 让空白空间环绕在弹性盒子的两侧，第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2 */
      justify-content: space-around;

/* space-between 让空白空间分布在弹性盒子与弹性盒子之间---第一个和最后一个弹性盒子离弹性容器的距离为0 */
      justify-content: space-between;

/* space-evenly 弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等 */
      justify-content: space-evenly;

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

image.png

4.伸缩比
属性： flex : 值;（值取整数，注意 : 只占用父盒子剩余尺寸）
伸缩比：flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度