移动端开发学习笔记

最新推荐文章于 2023-02-25 18:06:43 发布

嘤嘤怪呆呆狗

最新推荐文章于 2023-02-25 18:06:43 发布

阅读量571

点赞数 2

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/qq_45634593/article/details/116501023

版权

前端学习笔记专栏收录该内容

13 篇文章 9 订阅

订阅专栏

移动端开发

1、移动端开发基础

1.1 常见移动端屏幕尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rr33xZYF-1620388055039)(移动端开发.assets\image-20200716160107819.png)]

1.2 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口、理想视口

1.2.1 布局视口

布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面再手机上显示的问题
iOS，Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLXnAq2s-1620388055041)(移动端开发.assets\image-20200716160215881.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1OqJ03OF-1620388055043)(移动端开发.assets\image-20200716160231738.png)]

1.2.2 视觉视口

视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SKY0BGmr-1620388055046)(移动端开发.assets/image-20200716160324222.png)]

1.2.3 理想视口

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meat视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽

1.2.4 总结

视口就是浏览器显示页面内容的屏幕区域
视口分为布局视口、视觉视口和理想视口
我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
想要理想视口，我们需要给我们的移动端页面添加meta视口标签

1.2.5 视口标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-99PWlXJ7-1620388055047)(移动端开发.assets/image-20200716160447124.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wzfrKt25-1620388055049)(移动端开发.assets/image-20200716160458785.png)]

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        <!-- 
            device-width:设备的宽度
            user-scalable 设置是否允许运用缩放
            initial-scale 初始缩放比
            maximum-scale 设置最大的缩放比
            minimum-scale 设置最小的缩放比
         -->
    <title>Document</title>
</head>

<body>

</body>

</html>

1.2.6 标准的viewport设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L4p4kiGO-1620388055050)(移动端开发.assets/image-20200716160522100.png)]

1.3 二倍图

1.3.1 物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6、7、8是750*1334
我们开发时候的1px不是一定等于1 个物理像素的
PC端页面，1个px等于 1 个物理像素的，但是移动端就不尽相同
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

1.3.2 二倍图做法

如果直接放入图片他会放大 2倍会导致模糊

假设想要一个50X50像素的图片

1、准备一个100X100像素的图片

2、手动把这个图缩小为50X50像素的

这样就可以避免模糊

1.3.3 背景缩放 background-size

background-size：背景图片宽度背景图片高度

单位：长度 | 百分比 | cover | contain；
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域不会留白可能有部分背景图片显示不全
contain把图像扩展至最大尺寸，等比例缩放可能会留白

background-size也是background的一个子属性,可以支持连写:
background：color image repeat attachment position / size

1.3.4 多倍图切图 cutterman

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MViQSSW-1620388055051)(移动端开发.assets/image-20200716160540153.png)]

1.4 移动端开发选择

1.4.1 移动端主流方案

1、单独制作移动端页面（主流）

比如：移动商城手机版、淘宝触屏版、苏宁易购手机版

2、响应式页面兼容移动端（其次）

三星手机官网

1.4.2 单独移动端页面（主流）

通常情况下，网址域名前面加m（mobile）可以打开移动端。通过判断设备，如果是移动端设备打开，则跳转到移动端页面

1.4.3 响应式兼容PC移动端

三星电子官网：www.samsung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端

缺点：制作麻烦，需要花很大精力去调兼容性问题

1.5 移动端技术解决方案

1.5.1 移动端浏览器

移动端浏览器基本以 webkit 内核为主，因此我们就考虑 webkit 兼容性问题。

我们可以放心使用H5 标签和CSS3 样式

同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m7qRUaG4-1620388055052)(移动端开发.assets/image-20200716160736190.png)]

1.5.2 CSS初始化 normalize.css

移动端CSS初始化推荐使用 normalize.css/

Normalize.css：保护了有价值的默认值
Normalize.css：修复了浏览器的bug
Normalize.css：是模块化的
Normalize.css：拥有详细的文档

官网地址：http://necolas.github.io/normalize.css/

1.5.3 CSS3 盒子模型 box-sizing

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PHSSsmn6-1620388055053)(移动端开发.assets/image-20200716160747524.png)]

标准盒模型 box-sizing: content-box
content-box:
width = content width;
height = content height
IE盒模型 box-sizing: border-box
border-box:
width = border + padding + content width
heigth = border + padding + content heigth

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:nth-child(1) {
            /* 传统盒子模型= width + border + padding */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
        }

        div:nth-child(2) {
            /* 有了这句话就让盒子变成css3盒模型 
               padding 和 border 不会再撑大盒子*/
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid purple;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FM4VHFGq-1620388055053)(移动端开发.assets/image-20200716160803819.png)]

1.5.4 移动端 a链接点击后会高亮显示 input的周围高亮长按页面弹出菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NvYgY0aP-1620388055054)(移动端开发.assets/image-20200716160814725.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0cVPpuof-1620388055055)(移动端开发.assets/image-20200716160827940.png)]

1.6 二倍精灵图

在ps里面把精灵图等比例缩放为原来的一半
之后根据大小测量坐标
注意代码里面bacgground-size也要写：精灵图原来宽度的一半

1.7 背景渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8msP8LtK-1620388055057)(移动端开发.assets/image-20200716160910624.png)]

2、移动端开发常见布局

2.1 移动端技术选型

移动端布局和以前我们学习的PC端有所区别：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1LAHA8jb-1620388055057)(移动端开发.assets/image-20200716160924977.png)]

3、流式布局（百分比布局）

3.1 流式布局基本概论

流式布局，就是百分比布局，也称为固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
流式布局方式是移动web开发使用的比较常见的布局方式

核心思路的代码：

<!DOCTYPE html>
<html lang="zh-CN">

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

        section {
            margin: 0 auto;
            max-width: 980px;
            min-width: 320px;
            width: 100%;
        }

        section div {
            float: left;
            width: 50%;
            height: 400px;

        }

        section div:nth-child(1) {
            background-color: pink;
        }

        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

3.2 左侧固定死，右侧自适应 padding版本

如果一个盒子的宽度是继承的父级的，加padding 不会撑大盒子！！！

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 100px;
            border: 1px solid red;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            background-color: green;
            /* 如果一个盒子的宽度是继承的父级的，加padding 不会撑大盒子 */
            padding-left: 100px;

        }

        .info {
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 需求:左侧固定 右侧自适应 -->
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="info">222</div>
        </div>
    </div>
</body>

</html>

3.3 左侧固定死，右侧自适应 overflow hidden版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L6118016-1620388055058)(移动端开发.assets/image-20200716160937771.png)]

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 100px;
            border: 1px solid red;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            background-color: green;
            overflow: hidden;
          /* 添加了overflow:hidden 的元素不会和浮动的盒子有重叠的区域 */

        }

        .info {
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 需求:左侧固定 右侧自适应 -->
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="info">222</div>
        </div>
    </div>
</body>

</html>

3.4 左侧固定死，右侧自适应，margin版本

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 100px;

        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 120px;
            background-color: green;
            margin-left: 110px;
            /* 如果这个盒子的宽度是通过继承得到的，那么添加padding,border,margin都不会撑大盒子 */

        }
    </style>
</head>

<body>
    <!-- 需求:左侧固定 右侧自适应 -->
    <div class="box">
        <div class="left"></div>
        <div class="right">

        </div>
    </div>
</body>

3.5 右侧固定死，左侧自适应，浮动版本

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 100px;
            border: 1px solid red;
        }

        .left {
            float: right;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            background-color: green;


        }

        .info {
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 需求:左侧固定 右侧自适应 -->
    <!-- H5加载顺序是自上而下的 标准流的盒子要写在浮动流盒子的后面 -->
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="info">222</div>
        </div>
    </div>
</body>

</html>

3.6 圣杯布局用定位的方法版本

圣杯布局

两侧浮动中间标准流加高度，左右高宽写死给中间加overflow

<body>
    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search"></div>
        <div class="search-login"></div>
    </div>
</body>

/* 搜索 */
.search-wrap {
    position: relative;
    height: 44px;
}

.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
    width: 40px;
    height: 44px;
}

.search-login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    background-color: purple;
}

.search {
    height: 44px;
    background-color: skyblue;
    margin-left: 50px;
    margin-right: 50px;
}

3.7 圣杯布局用浮动版本

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 200px;
        }

        .left {
            float: left;
            background-color: blue;
            width: 100px;
        }

        .right {
            float: right;
            background-color: red;
            width: 100px;
        }

        .content {
            background-color: skyblue;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">我是左侧</div>
        <div class="right">我是右侧</div>
        <div class="content">我是内容</div>
        <!-- 

            注意：一定是左右浮动在前，标准流的 盒子在后面
         -->
    </div>
</body>

</html>

4、flex布局

4.1 初体验

加上 display:flex 以后，它里面的内容就不分块级元素，还是行内块元素，或者行内元素，都可以直接给大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MF5ml8F9-1620388055060)(移动端开发.assets/image-20200716160953068.png)]

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            widows: 80%;
            height: 300px;
            background-color: pink;
            display: flex;
            justify-content: space-between;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

4.2 布局原理

flex是 flexible Box 的缩写，意为“弹性布局” 用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们父盒子设置为flex布局以后，子元素的float、clear、vertical-align属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用flex布局的元素，称为flex容易，简称:容器，它的所有子元素自动成为容器成员，称为flex项目，简称项目

4.3 flex布局父项常见属性

4.3.1 常见父项属性

flex-direction ：设置主轴的方向
justify-content ：设置主轴上的子元素排列方式
flex-wrap ：设置子元素是否换行
align-contet ：设置侧轴上的子元素的排列方式（多行）
align-items ：设置侧轴上的子元素排列方式（单行）
flex-flow ：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

4.3.2 flex-direction 设置主轴的方向

1、主轴与侧轴

默认主轴方向就是X轴方向，水平向右
默认侧轴方向就是Y轴方向，水平向下

2、属性值

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction 设置谁为主轴，剩下的就是侧轴。我们的子元素是跟着主轴来排列的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ek2vQhAz-1620388055060)(移动端开发.assets/image-20200716161109215.png)]

4.3.3 justify-content 设置主轴上的子元素排列的排列方式

justify-content 属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好那个是主轴！！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SjbYKKrL-1620388055061)(移动端开发.assets/image-20200716161122587.png)]

justify-content: flex-start 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NeDxpv1o-1620388055062)(移动端开发.assets/image-20200716161132868.png)]

代码：

    <style>
        div {
            display: flex;
            /* 设置成flex布局 */
            justify-content: flex-start;
          /* 默认值  */
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

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

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

justify-content: flex-end 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWYvd5Gn-1620388055063)(移动端开发.assets/image-20200716161144747.png)]

代码：

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            justify-content: flex-end;
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

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

justify-content: center 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JLxLAM6m-1620388055063)(移动端开发.assets/image-20200716161155377.png)]

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */

            justify-content: center;
            /* 让子子元素居中对齐 */
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

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

4.3.4 justify-content: space-around 平均分配剩余的空间，给每一个盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4biggxto-1620388055064)(移动端开发.assets/image-20200716161205791.png)]

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OMhE89yX-1620388055065)(移动端开发.assets/image-20200716161216643.png)]

代码：

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */

            /* justify-content: center;
            让子子元素居中对齐 */

            justify-content: space-around;
            /* 把剩余的空间平均分配给每一格盒子 */
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

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

4.3.5 justify-content: space-between 两边先贴边，然后，中间的除了两边的盒子，再平分剩余空间

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DZguXBOZ-1620388055066)(移动端开发.assets/image-20200716161225891.png)]

代码：

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */

            /* justify-content: center;
            让子子元素居中对齐 */

            /* justify-content: space-around;
            把剩余的空间平均分配给每一格盒子 */

            justify-content: space-between;
            /* 两边先贴边，然后其他的盒子，平局分布剩余空间*/
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

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

4.3.6 flex-wrap 设置子元素是否换行

如果父盒子设置了flex布局，子元素容不下的时候，它会缩小子元素的宽度，始终把他们显示在一行上

比如：父元素宽度600px 子元素一个宽度100px 里面有60 个子元素，子元素在页面显示的宽度就不是100px了

flex 布局中，默认子元素是不换行的，如果装不开，就会缩小子元素的宽度，把所有的子元素都显示在一行上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwpr6XzY-1620388055067)(移动端开发.assets/image-20200716161236418.png)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-26TOSCV5-1620388055067)(移动端开发.assets/image-20200716161246527.png)]

代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 400px;
            height: 300px;
            background-color: pink;
            flex-wrap: wrap;
        }

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

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

</html>

4.3.7 align-items 设置侧轴上的子元素排列方式（单行）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgXVZ0h9-1620388055068)(移动端开发.assets/image-20200716161258341.png)]

stretch 使用这个代码，子元素必须是没有高度的否则不起作用

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H9hU2qCF-1620388055070)(移动端开发.assets/image-20200716161309114.png)]

代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 400px;
            height: 300px;
            background-color: pink;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            /* stretch 代表了拉伸，前提是子元素必须没有设置高度 否则不行 */
        }

        div span {
            width: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

4.3.8 align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行）在单行情况下是没有效果的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CEJjaCJU-1620388055071)(移动端开发.assets/image-20200716161323070.png)]

1、align-content: flex-start 属性

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QK7JHLZY-1620388055071)(移动端开发.assets/image-20200716161332412.png)]

代码：

    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
            align-items: stretch;
            /* 因为有了换行，items  不起作用了 */

            align-content: flex-start;
        }

        div span {
            width: 150px;
            height: 100px;
            margin: 5px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

2、align-content: center

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rtz4fIOh-1620388055072)(移动端开发.assets/image-20200716161343660.png)]

3、align-between会让这两行盒子一行顶着上边，一行顶着下面

4、align-around

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9OWrvLOZ-1620388055073)(移动端开发.assets/image-20200716161354814.png)]

4.3.9 align-content 和 align-items 区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中、拉伸
align-content 适用于多行（换行）的情况下，（单行情况下无效），可以这是上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找 align-items 多行找align-content

4.3.10 flex-flow

flex-flex 属性时 flex-direction 和 flex-wrap 属性的复合属性

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9yDQXWZP-1620388055074)(移动端开发.assets/image-20200716161406599.png)]

代码：

    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */

            /* 把设置主轴方向和是否换行  间写 */
            flex-flow: column wrap;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JdITGwXv-1620388055074)(移动端开发.assets/image-20200716161417356.png)]

4.4 flex布局子项常见属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

4.4.1 flex 属性

flex 属性定义子项目分配剩余空间，用flex 来表示占多少份数

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWdcN8KN-1620388055075)(移动端开发.assets/image-20200716161426092.png)]

并且红色和蓝色是固定死的，中间是自适应的，也就是圣杯布局

代码：

    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            flex: 1;
            background-color: green;
            /* 把剩余空间 分配给 XXXX */
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

4.4.2 align-self 控制子项在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖 align-items 属性

默认值为 auto 表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

要求：让三个盒子的某一个盒子垂直居中

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xbqjjDHg-1620388055076)(移动端开发.assets/image-20200716161436050.png)]

代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
            /* 让三个子盒子沿着侧轴底测对齐 */
            align-items: flex-end;

            /* 我们只想让3号盒子下来底测 */

        }

        section div:nth-child(1) {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        section div:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-color: blue;
            align-self: center;
        }
    </style>
</head>

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>

</html>

4.4.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认值为0

要求：三个盒子，每一个盒子的默认内容是 1 2 3 ，把2号盒子提到最前面

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGU9r5fY-1620388055077)(移动端开发.assets/image-20200716161508781.png)]

代码：

    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
            /* 让三个子盒子沿着侧轴底测对齐 */
            align-items: flex-end;

            /* 我们只想让3号盒子下来底测 */

        }

        section div:nth-child(1) {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        section div:nth-child(2) {
            order: -1;
            width: 100px;
            height: 100px;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-color: blue;
            align-self: center;
        }
    </style>
</head>

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>

5、rem布局

5.1 rem基础

rem是一个相对单位，类似于em ，em是父元素的字体大小。不同的是rem的基准是相对于html元素的字体大小。

rem 的优点就是可以通过html里面的文字大小来改变页面中元素的大小可以整体控制

比如：根元素（html）设置的font-size=12px，非根元素设置width:2rem 则换成px表示就是24px

em 是相对于父元素的字体大小来说的
rem 是相当于 html 的字体大小来说的

    <style>
        div {
            font-size: 12px;
        }

        p {
            width: 10em;
            height: 10em;
        }
        /* 
            p最终  宽高是120px
            因为  p 的  1em   ＝  12px
        */
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

5.2 媒体查询

媒体查询就是CSS3新语法

媒体查询一般都是从小到大或者从大到小的顺序进行的

使用 @media 查询可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果、安卓、平板等设备都用得到多媒体查询

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3NZB2n8S-1620388055079)(移动端开发.assets/image-20200716161527651.png)]

1、media type 查询类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vdgUtx8Z-1620388055080)(移动端开发.assets/image-20200716161540424.png)]

2、关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzWZdx6j-1620388055080)(移动端开发.assets/image-20200716161552099.png)]

    <style>
        /* 这句话的意思就是：在我们屏幕上并且 最大的宽度是800像素，设置我们想要的样式 */
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }

        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
        /* 
        当屏幕的尺寸 在500--800px 之间   背景色是pink 
        如果在0--500px  之间 背景色是purple
        */
    </style>
</head>

<body>
</body>

5.3 媒体查询+rem实现元素变化

<!DOCTYPE html>
<html lang="zh-CN">

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

        @media screen and (min-width:320px) {

            /* 表示 320  以上的 */
            html {
                font-size: 50px;
            }

            @media screen and (min-width:640px) {
                html {
                    font-size: 100px;
                }
            }
        }

        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="top">购物车</div>
</body>

</html>

5.4 rem适配方案技术使用（市场主流）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FjVMBMiV-1620388055081)(移动端开发.assets/image-20200716161604320.png)]

页面元素的rem 页面元素的px / html 字体大小 50

因为基准值是50，要按照设计稿来，做网页，然后根据页面的大小来不断地调整fontsize

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iF7aBgXX-1620388055082)(移动端开发.assets/image-20200716161615040.png)]

6、响应式布局

6.1 响应式开发原理

就是使用媒体查询对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHBdhVc7-1620388055083)(移动端开发.assets/image-20200716161625338.png)]

6.2 响应式布局容器

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

6.3 响应式导航栏

<!DOCTYPE html>
<html lang="zh-CN">

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

        .container {
            width: 750px;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }

        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }

            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</body>

</html>

6.4 bootstrap 简介

中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com/
推荐使用：http://bootstrap.css88.com/

优点：

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断地更新迭代
让开发更简单，提高了开发地效率

6.5 container类和 container-fluid类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9CDynnA-1620388055084)(移动端开发.assets/image-20200716161640552.png)]

6.6 栅格系统简介

栅格系统：它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多 12列

Bootstrap 里面 container 宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container化为12等份。

6.7 栅格系统参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AwvAD273-1620388055084)(移动端开发.assets/image-20200716161651299.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-psWiPZRL-1620388055085)(移动端开发.assets/image-20200716161659976.png)]

            <!-- 
                如果孩子份数相加等于12 则孩子能占满整个 的  container 的宽度
                如果孩子份数小于12  则占不满 整个 container的宽度 则会有空白
                如果孩子的份数大于12  则多出来的那一列会另起一行显示
            -->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
            <!-- 
                如果孩子份数相加等于12 则孩子能占满整个 的  container 的宽度
                如果孩子份数小于12  则占不满 整个 container的宽度 则会有空白
                如果孩子的份数大于12  则多出来的那一列会另起一行显示
            -->
        </div>
    </div>
</body>

</html>

6.8 列嵌套

列嵌套最好加一个行这样可以消除父元素的padding的值并且高度自动和父亲一样高

6.8 列偏移

使用 .col-md-offset-*类可以讲列向右偏移

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y8XUZW3s-1620388055086)(移动端开发.assets/image-20200716161712935.png)]

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <div class="col-md-4 col-md-offset-4">右侧</div>
          
        </div>
</body>

</html>

6.9 列排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HcBE4rfd-1620388055088)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200705155754102.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jzBpOjoA-1620388055089)(移动端开发.assets/image-20200716161723389.png)]

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
            <!-- 
                col-md-push-   是推的意思
                col-md-pull-   是拉的意思
             -->
        </div>
    </div>
</body>

</html>

6.10 列隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ja6J983n-1620388055089)(移动端开发.assets/image-20200716161739809.png)]

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }

        .row>div:nth-child(3) {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">1</div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md">我会变魔术</div>
            <!-- hidden-md  只在中等屏幕下隐藏 -->
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>

</html>