一、移动端特点

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

PC端网页和移动端网页的有什么不同？

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

手机屏幕小，网页宽度多数为100%

谷歌模拟器

2、谷歌模拟器

1.目标

使用谷歌模拟器调试移动端网页

3、分辨率

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

PC分辨率（这里列举两个）

1920 * 1080
1366 * 768

缩放150%（这里列举一个）

（1920/150%）*（1080/150%）

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

物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的

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

1.移动端主流设备分辨率

2.注意点

制作网页参考逻辑分辨率

4、视口

1.视口标签

width=device-width ---- 设备的宽度和视口(页面)宽度相等。
initial-scale=1.0 ---- 表示现在写多少像素，在页面之中就展示多少像素，不缩放，默认缩放比。
minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱

2.作用

使用meta标签设置视口宽度，制作适配不同设备宽度的网页，网页宽度和设备宽度(分辨率)相同。

3.说明

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

注意点

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

5、二倍图

1.作用

图片分辨率, 为了高分辨率下图片不会模糊失真。
在工作中可以使用像素大厨等测量软件是可以测量二倍图中元素的尺寸。

二、百分比布局

1、说明

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

三、Flex布局

1、Flex布局/弹性布局（不能和浮动一起使用）

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

2、弹性容器的特点（添加了df的这个盒子，叫做弹性容器）

默宽度就是父元素的宽度，高度由内容所撑开

3、弹性盒子的特点（就是弹性容器的最近一级子元素）

默认宽度由内容所撑开，默认的高度和父元素一样高。
弹性盒子没有块级元素，行内块元素，行内元素之分，统统叫做弹性盒子，弹性盒子可以设置宽高。
弹性盒子默认不会换行，会沿着主轴方向一行显示。
要注意弹性盒子的概念

4、Flex布局模型构成

1.作用

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

3.设置方式

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

4.组成部分

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

5、主轴对齐方式（属性是添加在弹性容器里面）

使用justify-content调节元素在主轴的对齐方式

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

2.代码案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>主轴对齐方式</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* df */
      /* 
        主轴方向的对齐方式，也是给弹性容器添加
        */
      display: flex;
      align-items: center;
      width: 800px;
      height: 130px;
      background: orange;
      margin: 10px auto;
    }

    .box div {
      width: 100px;
      height: 100px;
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      text-align: center;
      line-height: 100px;
      background-color: #0a0;
      border: 1px solid #fff;
    }

    .nav1 {
      /* flex-end：从右边开始显示 */
      justify-content: flex-end;
    }

    .nav2 {
      /* jcc center：在主轴上居中显示 */
      justify-content: center;
    }

    .nav3 {
      /* jcsad space-around:将空白空间均分之后，环绕在弹性盒子的两侧---第一个和最后一个弹性盒子与弹性容器之间的距离是弹性盒子与弹性盒子之间的距离的1/2 */
      justify-content: space-around;
    }

    .nav4 {
      /* jcsb space-between：空白空间会均分，然后存在于弹性盒子与弹性盒子之间，第一个和最后一个弹性盒子与弹性容器没有距离*/
      justify-content: space-between;
    }

    .nav5 {
      /* space-evenly:弹性盒子和弹性盒子之间的距离等于第一个和最后一个弹性盒子与弹性容器之间的距离 */
      justify-content: space-evenly;
    }
  </style>
</head>

<body>
  <div class="box nav1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box nav2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box nav3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box nav4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box nav5">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</body>

</html>

3.案例效果图

6、侧轴对齐方式

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

1. 修改侧轴对齐方式属性:

align-items（添加到弹性容器，控制多行）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子，控制单行）

2.align-items代码案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>侧轴对齐方式</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* df */
      /* 
        侧轴控制的是垂直方向的对齐方式 ai
        */
      display: flex;
      width: 540px;
      height: 230px;
      margin: 100px auto;
      background: orange;
    }

    .box div {
      width: 100px;
      height: 100px;
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      text-align: center;
      line-height: 100px;
      background-color: #0a0;
      border: 1px solid #fff;
    }

    .nav1 {
      /* 默认值 */
      align-items: flex-start;
    }

    .nav2 {
      /* flex-end:结束的地方，下面显示 */
      align-items: flex-end;
    }

    .nav3 {
      /* center：垂直居中 aic */
      align-items: center;
    }

    .nav4 {
      /* stretch：拉伸(默认值)到弹性盒子与弹性容器高度一样 */
      align-items: stretch;
    }
  </style>
</head>

<body>
  <div class="box nav1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box nav2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box nav3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box nav4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</body>

</html>

3.案例效果图

4.align-self代码案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>侧轴对齐方式</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      /* df */
      /* 
        侧轴控制的是垂直方向的对齐方式 ai
        */
      display: flex;
      width: 540px;
      height: 230px;
      margin: 100px auto;
      background: orange;
    }

    .box div {
      width: 100px;
      height: 100px;
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      text-align: center;
      line-height: 100px;
      background-color: #0a0;
      border: 1px solid #fff;
    }

    .nav1 {
      /* 默认值 */
      align-self: flex-start;
    }

    .nav2 {
      /* flex-end:结束的地方，下面显示 */
      align-self: flex-end;
    }

    .nav3 {
      /* center：垂直居中 aic */
      align-self: center;
    }

    .nav4 {
      /* stretch：拉伸(默认值)到弹性盒子与弹性容器高度一样 */
      align-self: stretch;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div class="nav1">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div class="nav2">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div class="nav3">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div class="nav4">3</div>
    <div>4</div>
    <div>5</div>
  </div>
</body>

</html>

5.案例效果图

7、主轴方向

使用flex-direction改变元素排列方向
主轴默认是水平方向, 侧轴默认是垂直方向

1.修改主轴方向属性: flex-direction

2.注意点

现在主轴和侧轴仅仅只是方向调换了而已，主轴依然还是用jc改变对齐方式，侧轴还是用ai改变对齐方式

3.代码案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        /* 添加弹性布局 df */
        display: flex;
        /* 
        改变主轴方向为垂直 fd

         flex-direction: column;
         这个值作用：主轴方向变为垂直，侧轴方向变为水平

         注意点：现在主轴和侧轴仅仅只是方向调换了而已，主轴依然还是用jc改变对齐方式，侧轴还是用ai改变对齐方式
         */
        flex-direction: column;

        /* 水平方向(侧轴)居中  aic */
        align-items: center;

        /* 垂直方向(主轴)均等分 jcsev */
        justify-content: space-evenly;
        width: 150px;
        height: 150px;
        border: 5px solid rgb(48, 33, 33);
      }
    </style>
  </head>

  <body>
    <div class="box">
      <img src="./images/media.png" alt="" />
      新闻资讯
    </div>
  </body>
</html>

4.案例效果图

8、弹性盒子换行

使用flex-wrap实现弹性盒子多行排列效果

1.换行后控制多行的侧轴对齐属性: align-content

2.换行后控制单行的侧轴排列属性: align-items

3.注意点

align-content属性出现是有前提条件的：必须要先设置flex-wrap: wrap。
align-content取值和jc一样的

4.代码案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>弹性盒子模型子元素换行显示</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        /* 添加df */
        display: flex;
        /* 让弹性盒子换行显示 fwp */
        flex-wrap: wrap;
        
        width: 1000px;
        height: 600px;
        background: orange;
      }

      .box span {
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: #0a0;
        border: 1px solid #fff;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
  </body>
</html>

5.案例效果图

7、伸缩比（属性是添加在弹性盒子里面）

使用flex属性修改弹性盒子伸缩比

1.属性：

flex : 值;

2.取值分类

数值(整数)

3.说明

所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度

4.注意点

只占用父盒子剩余尺寸

移动web总结三

一、移动端特点

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

2、谷歌模拟器

1.目标

3、分辨率

1.移动端主流设备分辨率

2.注意点

4、视口

1.视口标签

2.作用

3.说明

注意点

5、二倍图

1.作用

二、百分比布局

1、说明

三、Flex布局

1、Flex布局/弹性布局（不能和浮动一起使用）

2、弹性容器的特点（添加了df的这个盒子，叫做弹性容器）

3、弹性盒子的特点（就是弹性容器的最近一级子元素）

4、Flex布局模型构成

1.作用

3.设置方式

4.组成部分

5、主轴对齐方式（属性是添加在弹性容器里面）

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

2.代码案例

3.案例效果图

6、侧轴对齐方式

1. 修改侧轴对齐方式属性:

2.align-items代码案例

3.案例效果图

4.align-self代码案例

5.案例效果图

7、主轴方向

1.修改主轴方向属性: flex-direction

2.注意点

3.代码案例

4.案例效果图

8、弹性盒子换行

1.换行后控制多行的侧轴对齐属性: align-content

2.换行后控制单行的侧轴排列属性: align-items

3.注意点

4.代码案例

5.案例效果图

7、伸缩比（属性是添加在弹性盒子里面）

1.属性：

2.取值分类

3.说明

4.注意点

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