移动端

移动端特点

逻辑分辨率（可改）：屏幕的宽度跟高度的单位是像素（PX）；

设备分辨率（硬件不可改）：屏幕中一共拥有的物理像素点的个数；

针对不同清晰度的设备，如何自动加载出对应清晰度的图片

答：srcset

    <img srcset="./images/1.jpg 1x, ./images/2.jpg 2x, ./images/3.png 3x" />
    后边的1x 2x 3x 指的是 1/2/3倍数清晰屏幕(逻辑分辨率跟设备分辨率倍数之比)

百分比布局

视口

按照web前端的发展，主要分为布局视口跟理想视口

布局视口特点：
- html标签的大小是980px（当时的pc端版心都小于980px）
- 页面上的元素都被缩放

理想视口：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
有这行代码就显示这个网页是理想视口 现在常用

移动端布局

移动端跟pc端布局区别：

flex布局

特点：

父级添加 display: flex;之后，称父级为父项，子级为子项；
具体变化：
- 不在区分元素显示模式（块级元素、行内元素、行内块元素）,都可以直接设置宽高等样式
- 子项默认的宽度：由内容撑开
  
  默认的高度：等于父项的高度（原理是：侧轴的默认为拉伸）
- 子项使用浮动没有效果；使用定位、外边距、transform有效
- flex不会换行：默认情况下子项总宽度大于父项宽度时也不会换行，子项会压缩自身的宽度

语法：

<!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>布局特点</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 200px auto;
        }

        span {
            /* 1.设置浮动无效 */
            /* float: right; */
            /* 2.定位有效
            position: absolute; */
            /* 3.margin有效
            margin-left: 200px; */
            /* 4.transform有效
            transform: translateX(100px); */
            top: 100px;
            left: 20px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <!-- div设置了flex后,称为父项,子级称为子项
    1.子级的宽度由自身撑开
    高度 等于父项的高度
    2.不在区分元素显示模式,都可以直接设置宽高等样式
    3.添加浮动没有效果
    使用定位,margin,transform 有效

    <div class="box">
        <span>1</span>
    </div>
     -->
    <div class="box">
        <!-- 默认情况下,子项总宽度大于 父项的宽度也不会换行!!! flex不会换行,只会压缩自身的宽度 -->
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
    </div>
</body>

</html>

1. 设置主轴对齐方式：

语法：

            /* 设置主轴对齐方式 */
            /* 1.盒子连在一起居中 */
            /* justify-content: center; */
            /* 2.子项之间出现间隔并对齐 */
            /* justify-content: space-between; */
            /* 3.两边的间隔宽于子项 */
            /* justify-content: space-around; */
            /* 4.间隔距离等同 */
            justify-content: space-evenly;

<!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>布局特点</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 800px;
            height: 600px;
            background-color: pink;
            margin: 200px auto;

            /* 设置主轴对齐方式 */
            /* 1.盒子连在一起居中 */
            /* justify-content: center; */
            /* 2.子项之间出现间隔并对齐 */
            /* justify-content: space-between; */
            /* 3.两边的间隔宽于子项 */
            /* justify-content: space-around; */
            /* 4.间隔距离等同 */
            justify-content: space-evenly;
        }

        span {
            /* 1.设置浮动无效 */
            /* float: right; */
            /* 2.定位有效
            position: absolute; */
            /* 3.margin有效
            margin-left: 200px; */
            /* 4.transform有效
            transform: translateX(100px); */
            top: 100px;
            left: 20px;
            width: 200px;
            height: 200px;
            background-color: aqua;

        }
    </style>
</head>

<body>
    <!-- div设置了flex后,称为父项,子级称为子项
    1.子级的宽度由自身撑开
    高度 等于父项的高度
    2.不在区分元素显示模式,都可以直接设置宽高等样式
    3.添加浮动没有效果
    使用定位,margin,transform 有效

    <div class="box">
        <span>1</span>
    </div>
     -->
    <div class="box">
        <!-- 默认情况下,子项总宽度大于 父项的宽度也不会换行!!! flex不会换行,只会压缩自身的宽度 -->
        <span>1</span><span>2</span><span>3</span>
    </div>
</body>

</html>

2. 侧轴对齐方式 (单行跟多行)

单行对齐使用方式(align-items)

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

修改侧轴对齐方式属性:

align-items（添加到父项）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到子项）

实现居中布局

主轴：jcc

侧轴：aic

语法：

<!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 {
            /* 使用flex布局实现垂直居中更加方便 */
            display: flex;
            width: 600px;
            height: 600px;
            background-color: aqua;
            justify-content: center;
            align-items: center;
            margin-bottom: 100px;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .box1 {
            position: relative;
            /* display: flex; */
            width: 600px;
            height: 600px;
            background-color: aqua;
        }

        .box1 span {
            position: absolute;
            top: 50%;
            left: 50%;
            /* 原来的方式实现居中代码太多 */
            /* transform: translate(-50%, -50%); */
            margin-top: -50px;
            margin-left: -50px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <span></span>
    </div>
    <div class="box1">
        <span></span>
    </div>
</body>

</html>

flex换行(flex-wrap: wrap)-侧轴多行对齐方式

默认情况下，子项的总宽度大于父项宽度，父项不会自动换行，只会压缩子项的宽度铺满一行。

1. 换行（flex-wrap: wrap;）

目标：使用flex-wrap: wrap 让flex布局进行换行

语法： flex-wrap: wrap;

效果图：但是换行不会紧贴着第一行（原因：出现多行(比如2行)，flex自动分配高度(分为两份)，只是因为设置了高度，所以默认的高度空在了那里）

效果图

2. 原理图

<!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 {
            /* 使用flex布局实现垂直居中更加方便 */
            display: flex;
            width: 600px;
            height: 600px;
            background-color: aqua;
            /* justify-content: center;
            align-items: center;
            margin-bottom: 100px; */
            /* 换行 */
            /* flex-wrap: wrap; */
            flex-wrap: wrap;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </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>
    </div>
</body>

</html>

2. 侧轴多行对齐方式（align-content）

<!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>
</head>
<style>
    .box {
        /* 使用flex布局实现垂直居中更加方便 */
        display: flex;
        width: 600px;
        height: 600px;
        background-color: aqua;
        margin: 100px auto;
        /* 换行 */
        flex-wrap: wrap;
        /* 多行 对齐方式： */
        /* 1.顶部对齐
        align-content: start; */
        /* 2.整体居中对齐
        align-content: center; */
        /* 3.底部对齐
        align-content: flex-end; */
        /* 4.侧轴多行对齐：中间宽度大于底部跟顶部
        align-content: space-around; */
        /* 5.侧轴多行对齐：子项之间存在间隔
        align-content: space-between; */
        /* 6.侧轴多行对齐：绝对平均分配间隔 */
        align-content: space-evenly;
    align-items: ;
    }

    span {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<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>
    </div>
</body>

</html>

3. 子项flex

1. flex：份数

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

属性： flex : 值; （flex：数字）
取值分类：数值(整数)

这个只占用父盒子剩余尺寸（去除其他盒子的占比空间）

若有多个盒子设置了“flex：数字”，则需将子项中的设置的所有份数加起来，用父项的剩余尺寸去除

语法：

 flex: 数字;

案例：

<!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>
</head>
<style>
    .box {
        /* 使用flex布局实现垂直居中更加方便 */
        display: flex;
        width: 600px;
        height: 600px;
        background-color: aqua;
        margin: 100px auto;
        /* 换行 */
        flex-wrap: wrap;
        /* 多行 对齐方式： */
        /* 1.顶部对齐
        align-content: start; */
        /* 2.整体居中对齐
        align-content: center; */
        /* 3.底部对齐
        align-content: flex-end; */
        /* 4.侧轴多行对齐：中间宽度大于底部跟顶部
        align-content: space-around; */
        /* 5.侧轴多行对齐：子项之间存在间隔
        align-content: space-between; */
        /* 6.侧轴多行对齐：绝对平均分配间隔 */
        align-content: space-evenly;
    }

    span {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<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>
    </div>
</body>

</html>

2. align-self 设置子项的属性

语法：

<!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 {
            display: flex;
            width: 600px;
            height: 600px;
            background-color: aqua;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span:nth-child(2) {
            background-color: yellow;
            align-self: center;
        }
    </style>

</head>

<body>
    <div class="box"><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>

</html>

修改主轴方向(flex-direction)

语法：：

            <style>
		   /* 1.主轴方向：从左到右 （默认方向）
            flex-direction: row; */
            /* 2.主轴方向：从右到左（反方向） */
            flex-direction: row-reverse;
            /* 3.主轴方向:列 从上到下 （比较常用） */
            /* flex-direction: column; */
            /* 4.主轴方向：从下到上 */
            flex-direction: column-reverse;
            </style>

当修改了主轴的方向时，原本默认的设置属性也会发生改变：

    <style>           
		   /* 1.主轴方向：从左到右 （默认方向）
            flex-direction: row; */
            /* 2.主轴方向：从右到左（反方向） */
            flex-direction: row-reverse;
            /* 3.主轴方向:列 从上到下 （比较常用） */
            /* flex-direction: column; */
            /* 4.主轴方向：从下到上 */
            flex-direction: column-reverse;
    </style>

拓展

1.文字实现居中对齐

flex总结

<body>
    <!-- flex总结
    给父盒子添加ds，会出现如下的默认情况：
    1.默认子项可以直接设置宽高，且子项的默认宽度有内容撑开，默认高度等于父项高度。
    2.float 无效，外边距，定位以及转换有效；
    3.默认不换行，当子项的总宽度大于父项时，子项会自动压缩自身的宽度。

    父项
    设置主轴的方向：fd
    默认方向为rows 可修改为rows-reserve， column  column-reserve 
    设置主轴的对齐方式（6种）
    1.start 左对齐
    2.end 右对齐
    3.center 居中对齐
    4。jcsb 只有子项之间有间隔
    5. jcsa中间的宽度大于两侧
    6.jcse 绝对平均间隔

    设置侧轴的对齐方式
    一 单行侧轴：alight-items
    end start center
    二 多行侧轴
    1.需要先换行fw
    2. 对齐方式有6种：alight-content
      1-3 start end center
      4. acsb 侧轴盒子之间有间隔
      5. acsa 上下间距小于中间
      5.acse 侧轴间隔绝对平均

      子项：
      1.子项占父项宽度的比例：flex：数值
      2.子项在侧轴上的对齐方式：alight-self
    -->
</body>

前端web之flex布局

移动端