移动web知识总结（超详细）附带思维导图

最新推荐文章于 2024-04-06 13:28:01 发布

Vinson-

最新推荐文章于 2024-04-06 13:28:01 发布

阅读量2.1k

点赞数 3

文章标签： html5 css3 less

本文链接：https://blog.csdn.net/weixin_41821949/article/details/110524820

版权

在这里插入图片描述

移动web简介

什么是移动web

用于展示在移动设备上的网页(web)，称之为移动端页面。
移动设备泛指手机、平板等设备。

如何调试移动web页面

一些浏览器为前端开发者提供了真机调试模拟环境。例如：chrome。
打开开发者工具，点击手机图标即可切换到模拟环境。

移动web发展历程

从2014年10月HTML5标准规范最终发布后，移动web就迎来了飞速的发展。因为使用HTML5技术可以更方便更快捷的开发现代web应用程序
而移动端的手机浏览器都是比较新的 HTML5在移动端的浏览器支持情况都比较好
所以HTML5主要应用就是在移动端移动web开发中。
至今移动web已经发展了很多年各方面的技术都比较成熟稳定网上的教程也比较完整成熟所以现在的web已经到全民移动web的时代了
移动互联网商业模式多样化，移动互联网超越PC互联网，引领发展新潮流。

移动端布局特点

移动端页面与pc端页面的区别

a. 多机型适配

pc端页面不需要考虑机型适配的问题

但是移动端的设备机型尺寸特别多，需要考虑不同的机型尺寸

b. 页面结构简单

由于移动设备的屏幕远小于pc端，不采用很花哨的页面结构。

由于移动端的性能远不如pc端，所以网页不会很复杂。

常见的移动web页面结构：

广告栏

搜索栏

轮播图

导航栏

商品列表

底部

🔑移动web布局的核心思想

a. 不允许出现水平滚动条

pc端屏幕比较宽，多数采用固定宽度，水平居中两边留白的方式来布局，所以pc端不需要考虑屏幕宽度

移动端屏幕都是很小的，可用的显示宽度是有限的，所以要占据所有可用的宽度，但是不同的手机屏幕宽度不一样，这就要考虑屏幕适配问题

b. 页面整体宽度与屏幕一致

c. 盒子采用内减模式(怪异盒子模型、IE盒子模型、c3盒子模型) border-box

移动web布局方式介绍

a. 流式布局

使用百分比实现布局(百分比布局)

b. 弹性布局

c. rem布局

以html根标签上设置的字体大小作为一个相对量。

d. 响应式布局

👉 以上布局方式并不是一成不变，每种布局方式没有好坏之分，要根据情况灵活运用。例如：能用面分比就使用百分比不能使用就使用rem，rem不能使用就使用固定宽度。

移动web入门

视口(viewport)

简单的讲视口就是手机屏幕用于显示网页的窗口(pc端是没有视口的，视口是移动设备专有的名词)。
早期手机上显示网页的效果浏览者必须通过移动页面才可以看到其余部分。这样操作起来十分不便。
为了让用户有良好的浏览体验，现在在进行移动端布局时都会将页面宽度设计成与视口宽度一致。这样页面在移动端显示时就会自动全屏显示。
那么我们的代码要如何写才可以将页面的宽度与视口相同呢？

通过meta标签设置viewport来解决这个问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
name 要设置的属性，viewport对视口进行设置。

content 针对viewport设置那些内容。

width=device-width 作用是将要展示的页面布局的宽度与设备的宽度相同。
initial-scale=1.0 初始缩放为1(不缩放)
maximum-scale=1.0 最大的缩放比例(不缩放)
user-scalable=0 是否允许用户缩放

vscode快捷方式 meta:vp + tab

👉 移动端的页面上写入以上代码，就可以实现不用为页面整体宽度设置一个固定值，就可以将页面的宽度设置为任何一个移动设备屏幕的宽度。

移动端布局流程

布局的流程

1.ui会设计效果图

ui人员会选择dpr为2的设备来设计效果图。

常见的尺寸：640px、750px、960px

👉 ui人员在设计效果图时，使用的是物理像素。

2.前端人员编码

前端人员在编码时，需要转换为逻辑像素。

如果ui提供的是2倍的效果图，我们需要将所有的尺寸除2。宽、高、字体大小、内外边距。

如果是pc端的设计稿就是按设计稿上的物理像素来书写css尺寸。

注意事项

水平方向不允许出现滚动条

元素宽度不能超过视口宽度

禁止用户缩放

只进行宽度适配

页面整体宽度适配视口

使用百分比单位，高度使用固定px或内容撑开

百分比布局也称之为流式布局，流式布局并不是一种新的布局技术，而是百分比布局的

盒子采用内减模式 box-sizing:boder-box

盒子不受padding、border的影响避免出现滚动条。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <!-- 
     user-scalable=no控制用户不能缩放，如果缩放就会出现滚动条
  -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>Document</title>
 <link rel="stylesheet" href="">
 <style>
     *{
         margin:0;
         padding:0;
     }
     
     div{
         /* 盒子的宽度不能大于视口的宽度，如果大于就会出现滚动条 */
         /* width:500px; */
         /* 宽度使用百分比，高度使用px或内容撑开 */
         width:100%;
         height:100px;
         background:red;

         padding:20px;
         /* 盒子采用内减模式，避免出现滚动条 */
         box-sizing: border-box;
         border:5px solid red;
     }
 </style>
</head>
<body>
 <div>
     hello
 </div>
 
</body>
</html>

👉 父盒子采用内减模式后，子盒子宽度再设置为100%时，子盒子的宽度是相对于父盒子内容的宽度(父盒子的width - border - padding)。此时子盒子再设置padding、border、margin并不会从子盒子的尺寸上减去。如果子盒子设置了box-sizing:border-box;当设置padding、border时会自动减去。

flex布局(弹性/伸缩布局)

什么是弹性布局：
flex意为伸缩的，弹性的。弹性布局是css 3新增的一种盒子模型。
一句话：就是用于解决一个盒子内多个子盒子的排列及其分布。
弹性布局的特点
轻松的实现子元素的以上情况中位置的控制，间距的控制(不需要计算间距、不需要解决父元素塌陷问题)。
当父元素变大时弹性适应。

弹性布局的三个组成部分

弹性布局就是解决子元素在水平方向以及垂直方向上的排列以及分布方式。

所以弹性布局有三个组成部分

子元素
主轴(水平方向的控制)

主要用于控制子元素在水平方向的排列以及分布方式

次轴/交差轴(垂直方向的控制)

主要用于控制子元素在交差方向的排列以及分布方式

👉主轴、次轴并不是一个真实存在的轴，仅是我们在使用弹性布局时的一个方向性参照

👉 主轴与侧轴的方向并不是一成不变的

justify-content控制主轴的排列及分布

justify-content属性主要用于控制子元素在主轴方向上(主轴方向默认是水平从左向右)的排列及分布方式。

假设：主轴的方向是水平的，从左向右的。

flex-start

弹性开头(相当于左对齐)，默认的

flex-end

弹性结尾(相当于右对齐)

center

居中对齐

space-between

等距分隔(左、右子元素与父元素左边、右边没有间距)

space-around

等距环绕(左、右子元素与父元素左边、右边有间距)

space-evenly

平均分隔(与父元素的两侧以及子元素之间，距离都是相同的)

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            border:1px solid red;
            /* 开启弹性布局 */
            display:flex;
            /* 
            justify-content 用于控制子元素在 主轴 方向上的排列以及分布方式
            取值：
                flex-start      默认的，从左向右
                flex-end        从右向左
                center          水平居中
                space-between   等距分隔
                space-around    等距环绕
                space-evenly    平均分隔(与父元素的两侧以及子元素之间，距离都是相同的)
            */
            justify-content:space-evenly;
        }

        .box div{
            width:100px;
            height:100px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="item1" style="background:brown">1</div>
        <div class="item2" style="background:cyan">2</div>
        <div class="item3" style="background:orange">3</div>
        <div class="item4" style="background:blue">4</div>
    </div>
</body>
</html>

align-items控制次轴的排列及分布

align-items属性主要用于控制子元素在次轴方向上(交轴方向默认是垂直从上向下)的排列及分布方式。

👉align-items主要用在子元素高度不一致的情况下使用

假设：次轴默认就是垂直的，方向是从向下的。

flex-start

上对齐，默认的

flex-end

下对齐

center

居中对齐

baseline

首行文字对齐

stretch

上下都对齐(上下拉伸)，当没有设置子元素的高度时会拉伸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script></script>
    <style>
        #box{
            width:500px;
            height:300px;
            border:1px solid red;
            /* 启用弹性布局 */
            display:flex;
            /* flex-start 上对齐*/
            /* align-items: flex-start; */

            /* flex-end 下对齐*/
            /* align-items: flex-end; */

            /* center 居中*/
            /* align-items: center; */

            /* baseline 首先文字基线对齐*/
            /* align-items: baseline */

            /* stretch 拉伸 当元素没有设计高度时才会被拉伸*/
            align-items: stretch;
        }

        #box div{
            width:100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="div1" style="background:red;height:200px;font-size:40px;">1</div>
        <div class="div2" style="background:blue;height:150px;">2</div>
        <div class="div3" style="background:yellow;">3</div>
        <div class="div4" style="background:cyan;height:200px;">4</div>
    </div>
</body>
</html>

flex-wrap主轴换行

flex-wrap主要用于实现多行布局

nowrap

不实现换行

当不使用弹性换行时，如果子元素的宽度超出了父元素的宽度，那么子元素宽度会被自动压缩。

wrap

当子元素的总宽大于父元素时，进行换行显示。向下换行

wrap-reverse

当子元素的总宽大于父元素时，进行换行显示。向上换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script></script>
    <style>
        #box{
            width:500px;
            height:300px;
            border:1px solid red;
            /* 启用弹性布局 */
            display:flex;

            /* 
            nowrap 默认的不换行 
            当不使用弹性换行时，如果子元素的宽度超出了父元素的宽度，那么子元素宽度会被自动压缩。
            */
            /* flex-wrap:nowrap; */

            /* 换行，向下换行 */
            /* flex-wrap:wrap; */

            /* 换行，向上换行 */
            flex-wrap:wrap-reverse;
            
        }

        #box div{
            width:100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="div1" style="background:red;height:100px;">1</div>
        <div class="div2" style="background:blue;height:100px;">2</div>
        <div class="div3" style="background:yellow;height:100px;">3</div>
        <div class="div4" style="background:cyan;height:100px;">4</div>
        <div class="div4" style="background:blue;height:100px;">5</div>
        <div class="div4" style="background:cyan;height:100px;">6</div>
        <div class="div4" style="background:red;height:100px;">7</div>
    </div>
</body>
</html>

align-content控制多行的排列及分布

设置多行的对齐方式，只要当换行时才会生效。

假设：交差轴是垂直的，

flex-start

顶部对齐

flex-end

底部对齐

center

垂直方向居中对齐

space-between

垂直方向多行等距分隔

space-around

垂直方向多行等距环绕

space-evenly

平均分

stretch

高度拉伸，需要在没有设置高度的情况下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            border:1px solid red;
            /* 开启弹性布局 */
            display:flex;
            
            flex-wrap:wrap;
            /* 当设置了换行之后，在次轴方向就产生了多行，此时就有控制多行之间的分布需求
            align-content
            取值：
                flex-start      靠上
                flex-end        靠下
                center          居中
                space-between   等距分隔
                space-around    等距环绕
                space-evenly    平均分
            */
            align-content:space-evenly;
        }
        .box div{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1" style="background:brown;">1</div>
        <div class="item2" style="background:cyan">2</div>
        <div class="item3" style="background:orange">3</div>
        <div class="item4" style="background:blue">4</div>
        <div class="item2" style="background:cyan">5</div>
        <div class="item3" style="background:orange">6</div>
    </div>
</body>
</html>

👉 具有content的属性都是起点对齐、终点对齐、中间对齐、等距分隔、等距离环绕、拉伸

👉 具有items的属性是控制一行时的对齐：起点对齐、终点对齐、中间对齐、文字基线、拉伸

子元素的属性

flex

为子元素设置所要占据父元素尺寸的权重。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script></script>
    <style>
        #box{
            width:500px;
            height:300px;
            border:1px solid red;
            /* 启用弹性布局 */
            display:flex;
            /* 由于width属性不生效了，所以弹性换行也不起作用 */
            flex-wrap: wrap;
        }

        .div1{
            /* flex与width同时设置width不会生效 */
            flex:1;
            width:200px;
        }
        .div2{
            flex:2;
            width:200px;
        }
        .div3{
            flex:3;
            width:200px;
        }
        .div4{
            flex:2;
            width:200px;
        }
        .div5{
            flex:1;
            width:200px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="div1" style="background:red;height:100px;">1</div>
        <div class="div2" style="background:blue;height:100px;">2</div>
        <div class="div3" style="background:yellow;height:100px;">3</div>
        <div class="div4" style="background:blue;height:100px;">4</div>
        <div class="div5" style="background:cyan;height:100px;">5</div>
    </div>
</body>
</html>

👉 flex会在减去了子元素上已设置了width值(没有设置width就使用内容宽度)结果，进行计算权重。

order

设置子元素的排列顺序，数值小的排在前面。默认为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script></script>
    <style>
        #box{
            width:500px;
            height:300px;
            border:1px solid red;
            /* 启用弹性布局 */
            display:flex;
            
        }

        .div1{
            flex:1;
            
        }
        .div2{
            flex:2;
            /* 数值越小越排在前面 */
            order:-2;
        }
        .div3{
            flex:3;
            order:-1;
        }
        .div4{
            flex:2;
            
        }
        .div5{
            flex:1;
            
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="div1" style="background:red;height:100px;">1</div>
        <div class="div2" style="background:blue;height:100px;">2</div>
        <div class="div3" style="background:yellow;height:100px;">3</div>
        <div class="div4" style="background:blue;height:100px;">4</div>
        <div class="div5" style="background:cyan;height:100px;">5</div>
    </div>
</body>
</html>

align-self

取值align-items相同，仅仅是用于设置当前子元素的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script></script>
    <style>
        #box{
            width:500px;
            height:300px;
            border:1px solid red;
            /* 启用弹性布局 */
            display:flex;
            /* 父元素统一设置 */
            align-items: center;
        }

        .div1{
            flex:1;
            
        }
        .div2{
            flex:2;
            order:-2;
        }
        .div3{
            flex:3;
            order:-1;
        }
        .div4{
            flex:2;
            /* 会覆盖父元素的align-items的设置 */
            align-self: flex-start;
        }
        .div5{
            flex:1;
            
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="div1" style="background:red;height:100px;">1</div>
        <div class="div2" style="background:blue;height:100px;">2</div>
        <div class="div3" style="background:yellow;height:100px;">3</div>
        <div class="div4" style="background:blue;height:100px;">4</div>
        <div class="div5" style="background:cyan;height:100px;">5</div>
    </div>
</body>
</html>

更改轴的方向

flex-direction 修改主轴的方向，当主轴方向修改时，次轴会自己修改为与主轴交差。

row 代表水平

row 默认是从左向右

row-reverse 从右向左

column 代表垂直

column 从上向下

column-reverse 从下向上

弹性布局小结

也是解决一个父元素内多个子元素共存于一行的问题，还可以方便的进行分布的控制。

启用弹性布局

父元素：

display:flex;

主轴(默认是水平)

justify-content: flex_start、flex_end、center、space-around、space-between

次轴(默认是垂直的)

align-items: flex_start、flex_end、center、baseline、stretch

多行：flex-wrap:nowrap、wrap、wrap-reverse

align-content: flex_start、flex_end、center、space-around、space-between

子元素：

flex:整数;

order

align-self 控制自己对齐方式

更改主轴：

flex-direction

元素居中的三种方式

text-align:center;

margin:0 auto;

justify-content:center;

rem布局

rem 与 em区别

em是相对单位，使用em进行尺寸度量的元素，都是相对于自身的文字尺寸，各自为政，太过零散，不好进行统一的控制。
rem也是相对单位，所有使用rem进行尺寸度量的元素，都是相对于根元素html标签的文字尺寸，可以很容易的进行统一控制，只要html标签的字体变了，所有元素的rem都会变化。

rem的使用流程

确定html根标签的font-size设置为屏幕宽度(逻辑像素)的10分之1(这个10分之1就是rem与px的比例)
根据比例将px转换为rem

vscode编辑器px to rem插件或 cssrem

在采用rem布局进行编码时，我们需要将css尺寸转换为rem，大家也感觉到了这种计算很繁琐，但时vscode编辑器中的cssrem插件为我们提供了这样的转换。

在这里插入图片描述

alt + s: 设置rem与px的比例(屏幕css宽度的10分之1)

alt + z: 输入数值后，按alt + z进行px与rem的转换。

在这里插入图片描述

插件的px与rem换算比例的设置

文件 > 首选项 > 设置搜索插件名

在这里插入图片描述

动态设置html标签的font-size

👉 以上代码虽然实现了页面效果在不同屏幕几乎完全一致。但是对于html标签的font-size的设置还是手动的，能否实现在不同页面在不同的屏幕上自动设置font-size值呢？

为了能够根据不同的屏幕来为html标签设置相应的字体大小，我们需要借助外力实现，我们要借助的外力是flexible.js文件。

👉 flexible.js 文件是淘宝为了自己的页面能在不同的手机屏幕上都能为html标签的字体大小设置10分之1的大小，自己书写了一个js文件，来解决这个问题。flexible.js文件，可以动态的读取屏幕的css像素，并除10，再设置给html标签的字体属性。

我们只需要下载flexible.js并引入到html文件中即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 需要设置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src="flexible.js"></script>
</head>
<body>
    
</body>
</html>

👉 在采用rem布局进行编码时，只需要根据当前设计稿的css像素尺寸计算rem即可，不需要考虑当前设计稿在不同屏幕的情况。只需要计算出css像素与rem的对应关系，至于rem与屏幕的对应关系是由rem.js动态完成的。因为rem.js会自动根据不同的设备(不同的屏幕尺寸)，动态的获取屏幕的css像素宽度，然后除10，最后设置给html的font-size属性。

这样就形成了html主外，rem主内。html标签将当前屏幕宽度情况，读取过来以字体大小的形式保存起来。html内所有的标签再以这个字体大小为度量单位，就可以形成屏幕大了，html内的元素就相应的大了，屏幕小了html内相应元素就小了。就这么简单，html的font-size参照屏幕，内部标签参照html。

Less(css预处理器)

Less介绍及开发环境的搭建

Less介绍

之前在进行css页面布局时我们写了很多重复的代码，而且修改起来很麻烦。

less是一种css语言的预处理器。

通俗的说，CSS预处理器是一种专门编写css代码的语言(工具)，通过less来编写css代码变得更灵活，更高效，更容易维护。

什么是预处理(预编译)

Less是用来书写css代码的工具，Less文件的内的代码格式并不能被浏览器识别。想将Less文件代码变成css代码，必须先将这个Less文件预先进行处理。预处理的就可以将Less文件代码转换为css代码。
目前编写css的代码的效率不高，为了适应前端开发日益复杂和工程化的需要，所以科学家开发了书写css代码的新方式。这种预处理器有很多，最常被使用及讨论的就是less、sass、stylus，我们主要学习less。

Less开发环境的搭建

👉 Less是编写css的工具，工具就需要安装才可以使用。

vscode编辑器

Less使用流程

先创建less文件

创建一个less文件，扩展名为less，在这个文件内编写less代码

转换为css文件

使用编辑器上安装插件或命令来将less文件转换为css文件

编辑器上安装的less插件在对less文件进行保存时，会自动对less文件内的代码转换为css代码，并保存为css文件，以备html引入

html文件中引入css文件

在html文件中引入的是转换后的css文件，并不是原less文件。

浏览器根本不识别less代码，仅实现转换后的css代码。

示例：

Less的语法

因为 Less 和 CSS 非常像。 Less 的语法，仅是在CSS 语言语法上增加了少许方便的扩展，所以 Less 对于有css基础的人来说易学很多。

任何一门语言最终都要体现在代码上，less中可以书写什么样的代码呢？

变量

变量的作用

变量用于存储数据，数据只要指的是css中多次使用的数值(尺寸、字体大小)或字符串(颜色单词)。

css中的数据指的是冒号右侧的内容。

变量的语法

@变量名:数据

👉 变量名可以是全数字，但不推荐。变量名就可以包含下划线与中横线

注意事项

less中的变量可以使用 + - * / 进行数值运算

混入

混入的作用

将一段css代码，引入到另一个选择器中。

混入的语法

.类名()

👉 也可以是id选择器，绝大多数使用的是类选择器。

嵌套

嵌套的作用

将后代选择器的代码书写在父选择器的大括号内，提高代码的可读性。

选择子代元素

&符号

作用

用于表示当前选择的元素的本身，主用于给伪类添加样式更方便。

导入

作用

在一个less文件中引入多个css文件，可以减少html文件中的link标签的数量(提高代码的简洁性)

在实际项目中会有多个css文件，导入的本质就是将多个css文件合并到一个文件中

语法

@import “导入的文件名”;

注意：

文件名必须使用引号括起来

后面的分号不能省略

less后缀可以省略

👉 less文件中也可以引入css文件；如果引入时省略扩展名，则只能引入less文件，不会引入css文件。

响应式布局与媒体查询

响应式布局

什么是响应式布局

一个页面适配多种终端(pc、移动端、平板)

响应式布局的核心原理

根据不同的屏幕尺寸应用不同的样式。

示例网站：

经典的响应式布局站点：http://www.daqianduan.com/4614.html?tdsourcetag=s_pcqq_aiomsg

国内经典的响应式布局网站：http://www.bootcss.com

响应式布局的优缺点

优点：

全适配 一套网页代码即可以适配pc端，也可以适配移动端，而不需要书写多套页面。

缺点：

由于一套网页代码即要能适配pc端，又要能适配移动端，那么这套代码就必须同时包含pc端和移动端。只是在这一套代码中根据不同的屏幕来应用不同的代码。

代码量非常大，不利于后期维护。

响应式布局的适用场景

适用

网页结构简单：通常是一些专题类网站，例如：博客类，http://www.csdn.net ，技术类，http://www.bootcss.com、https://docs.golaravel.com

公司规模小

不适合

网页结构复杂：电端类网站这些网站结构很复杂(京东、天猫、淘宝)，使用响应式布局开发与维护都很困难。

公司规模大

如何区别一个网站是否采用的是响应式

首先使用谷歌浏览器打开网站，再打开控制台切换到移动端刷新网页。如果前后网址一样则表示采用的是响应式布局。如果不一样则表示并没有采用响应式，而是做了两套页面来适配pc端与移动端。

媒体查询

媒体查询是实现响应式布局的根本技术。

什么是媒体查询

媒体通常指的就是浏览网页的设备的屏幕介质。

媒体查询是css3中新增的功能，css3的可以查询到当前运行css代码的屏幕的宽度，它的作用是可以根据不同的媒体类型定义不同的样式。

👉 响应式布局的关键点是根据不同的屏幕尺寸应用不同的css样式，那么浏览器上的css就要能够识别此时此刻浏览网页设备的屏幕尺寸信息。并判断屏幕尺寸是否满足css代码中所定义的屏幕尺寸范围，如果满足就应用样式，不满足就不应用。

语法

@media 媒体类型 and (媒体特征){

// css代码

}

示例：

@media screen and (width:700px){ //样式 }

当屏幕的宽度是700px时，应用样式

@media screen and (min-width:1000px){ //样式 }

如果想应用这个样式屏幕宽度最小只能到1000px，换个角度讲，大于1000px时应用这个样式

@media screen and (max-width:1200px){ //样式 }

如果想应用这个样式屏幕宽度最大只能到1200px，换个角度讲，小于1200px时应用这个样式。

@media screen and (min-width:1000px) and (max-width:1200){ //样式 }

如果想应用这个样式屏幕宽度只能在100px与1200px之间。

说明

🔑 and 两侧必须有空格
媒体类型

值描述
screen 用于电脑屏幕、平板、智能手机
print 用于打印机
braille 盲文
embossed 盲文打印
handheld 手持设备
projection 项目演示，比如幻灯片
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视
all 所有设备

👉 由于我们的页面不需要考虑用户打印，所以最常用的就是screen。

媒体特征

max-width 最大宽度

min-width 最小宽度

👉 媒体特征非常多，最常用的就是以上两个。

值	描述
screen	用于电脑屏幕、平板、智能手机
print	用于打印机
braille	盲文
embossed	盲文打印
handheld	手持设备
projection	项目演示，比如幻灯片
speech	演讲
tty	固定字母间距的网格的媒体，比如电传打字机
tv	电视
all	所有设备

简写语法

screen可以省略，例如： @media( 媒体特征)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script></script>
    <style>
        .box{height:100px;}
        /* 媒体查询 */
        /* 标准语法 */
        /* width很少用，因为匹配的太精确 */
        /* @media screen and (width:600px){
            .box{
                background:cyan;
            }
        } */

        /* 范围 */
        /* 
            min-width:1200 尺寸最小为 1200 换句话讲就是  >=1200
            max-width:1000 尺寸最大为 1000 换句话讲就是  <=1000
        */
        /* 
        // 大于1200
        @media screen and (min-width:1200px){
            .box{
                background:cyan;
            }
        }
        // 小于1000
        @media screen and (max-width:1000px){
            .box{
                background:gold;
            }
        } 
        // 但于1200与1000之间
        @media screen and (max-width:1200px) and (min-width:1000px){
            .box{
                background:#ccc;
            }
        }
        */

        /* 省略screen */
        /* 浏览器上生效，打印时样式不生效 */
        /* @media screen and (min-width:100px){
            .box{
                color:red;
                font-size: 30px;
            }
        } */

        /* 浏览器上生效，打印时也生效 */
        @media(min-width:100px){
            .box{
                color:red;
                font-size: 30px;
            }
        }

    </style>
</head>
<body>
    <div class="box">hello</div>
</body>
</html>

👉 不要被 媒体查询 的名子迷惑了，我们要作的并不是如何查询到屏幕的尺寸，我们仅需要设置什么屏幕尺寸应用什么样式即可。至于css在浏览器上执行时如何查询到屏幕尺寸并应用我们设置的样式的工作是由浏览器完成的，和我们没有关系。换句话讲，我们仅是制目标，至于怎么实现是别人的事。

媒体查询练习

首先明确：

响应式有能力对任何尺寸的屏幕进行响应式布局，但是由于屏幕的尺寸种类太多，所以做到面面具到是没有太大意义。

实际开发中，我们仅关注4种尺寸。

设备类型	屏幕范围	媒体查询
大pc(桌面电脑、大屏笔记本)	大于等于1200	@media(min-width:1200px){}
pc(小屏笔记本)	大于等于 992 且小于 1200	@media(min-width:992px) and (max-width:1200){}
平板	大于等于768 且小于 992	@media(min-width:768px) and (max-width:992px){}
手机	小于768	@media(max-width:768px)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script></script>
    <style>
        @media(min-width:1200px){
            body{
                background:gold;
            }
        }

        @media(min-width:992px) and (max-width:1200px){
            body{
                background:greenyellow;
            }
        }

        @media(min-width:768px) and (max-width:992px){
            body{
                background:hotpink;
            }
        }

        @media(max-width:768px){
            body{
                background:indigo;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

响应式布局编码顺序简介

先定义公共样式(在屏幕上都不会改变的样式)
再用媒体查询，根据范围定义不同的样式
1. 从大到小使用max-width
2. 从小到大使用min-width

需求：

如果是大pc显示4个盒子

如果是小pc显示3个盒子

如果是平板显示2个盒子

如果是手机显示1个盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script></script>
    <style>
        /* 
        需求：
            如果是大pc显示4个盒子
            如果是小pc显示3个盒子
            如果是平板显示2个盒子
            如果是手机显示1个盒子
         */
         /* 
         1. 先定义公共样式
         2. 再用媒体查询，根据范围定义不同的样式
          */

        /* 1. 先定义公共样式 */
        div{
            float:left;
            width:200px;
            height:200px;
            background:#e9e9e9;
            text-align: center;
            line-height: 200px;
        }

        /* 2. 再用媒体查询，根据范围定义不同的样式 */
        /* 大pc */
        @media(min-width:1200px){
            div{
                width:23%;
                margin:1%;
            }
        }

        /* 小pc */
        @media(min-width:992px) and (max-width:1200px){
            div{
                width: 31.3%;
                margin: 1%;
            }
        }

        /* 平板 */
        @media(min-width:768px) and (max-width:992px){
            div{
                width: 45%;
                margin: 2.5%;
            }
        }

        /* 手机 */
        @media(max-width:768px){
            div{
                width: 90%;
                margin: 5%;
            }
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

过渡动画

什么是过渡动画

示例：使用hover实现位置变换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:200px;
            height:200px;
            background:cyan;
            position: absolute;
            left:0;
            top:0;
        }
        .box:hover{
            left:100px;
            top:100px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

以上示例中盒子从0px位置瞬间移动到了100px位置，根本没有看到中间的位置变化的过程。如果想看到中间位置变化的过程就是过渡动画。

transition是复合属性

transition属性是一个复合属性，复合属性有多个派生子属性，类似于background属性、border属性…

background 复合属性。以下是background的派生子属性(都是以background开头)：

background-image

background-color

background-repeat

background-position

border 复合属性。以下是border的派生子属性(都是以border开头)：

border-style

border-width

border-color

transition属性介绍

transition-property

需要应用过渡效果的属性名

例如：width、top、color、background-color、all(表示所有属性，使用的最多)

transition-duration

过渡效果持久的时间，单位：s(秒用的最多)、ms(毫秒)

例如：1s表示1秒 500ms表示500毫秒

👉 此属性必须设置，因为默认是0, 0表示动画的持续时间没有，所以看不到效果。

transition-timing-function

过渡效果速度类型

常用ease，表示过渡效果的速度由慢变快，再由快降到慢。

transition-delay

过渡动画开始之前等待的时间(延时时间)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:200px;
            height:200px;
            left:0;
            top:0;
            background:cyan;
            position: absolute;
            /* 
            transition-property：应用过渡效果的属性
            transition-duration：过渡效果持续的时间
            transition-timing-function: 过渡效果的时间曲线
            transition-delay: 动画的延时时间(一般不使用)
            */

            /* 
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: linear; 
            transition-delay: 3s; 
            */

            /* 使用复合属性 */
            transition: all 1s linear 3s;
        }
        .box:hover{
            left:100px;
            top:100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

细节：

过渡动画绝大多数是设置在初始状态内，而不是终止状态内设置。
如果多个属性的动画效果不一致，在复合属性中要使用逗号分隔分开书写(这种情况很少)。
例如：left属性过渡效果要持续2秒，top属性要持续3秒，background-color持续4秒
transition: left 2s linear,top 3s linear,background-color 4s;

transform2d变换

transform属性介绍

transform属性主要用于实现平移、旋转、缩放、倾斜效果，所以平移、旋转、缩放、倾斜都是transform的属性值。

常用的属性值如下：

transform:translate()

变换效果

transform:rotate()

旋转效果

transform:scale()

缩放效果

transform:skew()

倾斜效果(不常用)

translate 2d平移

css语法:

transform:translate(x,y)

说明：

以元素当前的位置为相对参照，进行水平、垂直方向移动。

x 表示水平方向移动，正数向右，负数向左

y 表示垂直方向移动，正数向下，负数向上

x、y的取值如果是百分比，则是相对于元素本身尺寸。

如果设置1个值，表示只进行水平平移。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:100px;
        }
        .box{
            width:100px;
            height:50px;
            background:cyan;
        }
        .box:hover{
            /* transform: translate(10px,20px); */
            /* 负值为反方向移动 */
            transform: translate(-10px,-20px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

案例：利用translate完美的实现元素的垂直居中，且自适应父元素宽度。

思路：

利用定位，设置left:50%; top:50%;

定位的left、top是相对于父元素尺寸的，

会移多出一部分，而这部分正好是元素尺寸的一半

通过平移，让元素向左向上拉回自身的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
        }
        .box{
            width:300px;
            height:200px;
            background:cyan;
            /* 利用定位，设置left:10%; top:50%; */
            position: absolute;
            left: 50%;
            top: 50%;
            /* 利用平移 */
            transform:translate(-50%,-50%);
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

rotate 2d旋转

css语法：

transform:rotate(角度)

说明：

角度的单位是 deg

角度值为正数，表示顺时针旋转

角度值为负数，表示逆时针旋转

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        css语法：
            transform:rotate(角度)
        说明：
            角度的单位是 deg
            角度值为正数，表示顺时针旋转
            角度值为负数，表示逆时针旋转
        */
        
        *{
            margin:100px;
        }
        .box1, .box2{
            width:100px;
            height:100px;
        }
        .box1{
            background:cyan;
            /* 2d 旋转 */
            transform: rotate(30deg)
        }
        
        .box2{
            background:deepskyblue;
            /* 2d 旋转 */
            transform: rotate(-30deg)
        }
        
    </style>
</head>
<body>
    <div class="box1">hello</div>
    <div class="box2">world</div>
</body>
</html>

scale 2d缩放

css语法：

transform:scale(h,v)

说明：

h表示水平缩放比例

v表示垂直缩放比例

取值：

0-1之间缩小

大于1进行放大

小于0进行镜向缩放

如果设置1个值，表示水平以及垂直同时缩放。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
     body{
         margin:100px;
     }
     
     .box1{
         width: 100px;
         height: 100px;
         background:cyan;
         /* 2d 放大 */
         /* 水平放大1.5倍，垂直不变 */
         /* transform: scale(1.5,1) */
         
         /* 水平放大1.5倍，垂直放大2部 */
         /* transform: scale(1.5,2); */
         
         /* 水平放大2倍，垂直放大2部 */
         /* transform:scale(2); */

         /* 2d 缩小 */
         /* transform:scale(.5); */

         /* 负数为缩放且镜像 */
         transform:scale(2,-2)
     }
     
 </style>
</head>
<body>
 <div class="box1">hello</div>
</body>
</html>

skew 2d倾斜(了解)

css语法：

transform: skew(xdeg,ydeg)

说明：

xdeg设置水平方向的倾斜角度

ydeg设置垂直方向的倾斜角度

如果设置一个值，仅表示水平倾斜

示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            height: 200px;
            width: 800px;
            margin: 100px auto;
            display: flex;
            justify-content: space-between;
        }

        .wrap div {
            width: 200px;
            height: 200px;
            background:#ccc;
            transition: all 2s;
        }

        .box1:hover{
            transform:skew(30deg,0);
        }

        .box2:hover{
            transform:skew(0,30deg);
        }

        .box3:hover{
            transform:skew(30deg,30deg);
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

transform3d转换

3d变换介绍

2d是平面，3d是空间

在这里插入图片描述

默认情况下，电脑屏幕是二维的并不是三维的。如果想实现三维效果，必须设置视距属性(perspective)，让css开启3d效果的模拟。

在这里插入图片描述

👉 只要变换效果会呈现在垂直于电脑屏幕的方向就需要设置视距。

👉 视距就是眼睛与物体之间的距离。用于模拟3d中近大远小的规则。

translatex\translatey\translatez 3d平移

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /*  */
            perspective: 900px;
        }
        .wrap {
            height: 200px;
            width: 800px;
            margin: 100px auto;
            display: flex;
            justify-content: space-between;
            background:red;
        }

        .wrap div {
            width: 200px;
            height: 200px;
            background:#ccc;
            transition: all 2s;
        }

        .box1:hover{
            transform:translatex(30px);
        }

        .box2:hover{
            transform:translatey(30px);
        }

        .box3:hover{
            /* 由于是z轴移动，呈现的是3d效果，所以需要设置视距 */
            transform:translatez(30px);
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

👉 由于3d是包含2d的，所以translatex(x)与translatey(y)与transalte(x,y)实现的效果是一样的。

rotatex\rotatey\rotatez 3d旋转

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0 auto;
            perspective: 900px;
        }
        .wrap {
            height: 200px;
            width: 800px;
            margin: 100px auto;
            display: flex;
            justify-content: space-between;
            background:red;
        }

        .wrap div {
            width: 200px;
            height: 200px;
            background:#ccc;
            transition: all 2s;
        }

        .box1:hover{
            transform:rotatex(30deg);
        }

        .box2:hover{
            transform:rotatey(30deg);
        }

        .box3:hover{
            transform:rotatez(30deg);
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

scalex\scaley\scalez 3d缩放

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /*  */
            perspective: 900px;
        }
        .wrap {
            height: 200px;
            width: 800px;
            margin: 100px auto;
            display: flex;
            justify-content: space-between;
            background:red;
        }

        .wrap div {
            width: 200px;
            height: 200px;
            background:#ccc;
            transition: all 2s;
        }

        .box1:hover{
            transform:scalex(.5);
        }

        .box2:hover{
            transform:scaley(.5);
        }

        .box3:hover{
            transform:scalez(.5);
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

@keyframes帧动画

@keyframes简介

transition动画存在的问题

动画不能自动开始(现阶段需要hover配合)

动画次数固定1次，不能循环播放。

@keyframes动画(帧动画)

可以自动开始

次数不限

语法介绍

@keyframes动画的使用流程

@keyframes定义动画

css语法：

@keyframes 动画名{

from{

// 开始css样式

}to{

// 结束css样式

}

}

👉 当我们使用@keyframes定义好了一个动画，它并不会执行产生任何效果，直到我们通过animation属性将动画应用到相应元素上。

animation应用动画

css语法：

示例：

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .box{
            width: 50px;
            height: 50px;
            background:#ccc;
            border-radius: 5px;
            margin: 100px auto;
            /* 应用动画 */
            animation-name:xuhuan;
            animation-duration:1s;
        }

        /* 定义动画 */
        @keyframes xuhuan{
            from{
                border-radius: 0px;
            }to{
                transform:rotate(360deg);
                border-radius: 50px;
            }
        }
    </style>
</head>

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

</html>

animation属性详解

animation-name

设置元素所要应用的帧动画

animation-duration

设置动画持续的时间

animation-delay

设置动画延时时间

animation-timing-function

设置动画的效果速度类型(与transition-timing-function相同)

animation-fill-mode

常用的值为 forwards 动画停止时，元素的样式停留在最后一帧的样式

animation-iteration-count

设置动画播放的次数，取值：整数、infinite(无限播放)

animation-direction

指定动画是否反向播放或交替播放，需要设置多次播放才有效果

取值：normal, reverse, alternate, alternate-reverse

normal 开头 -> 结尾

reverse 结尾 -> 开头

alternate 开头 -> 结尾 -> 开头 -> …

alternate-reverse 结尾 -> 开头 -> 结尾 -> …

animation-play-state

paused 控制动画暂停

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .box{
            width: 50px;
            height: 50px;
            background:#ccc;
            /* border-radius: 5px; */
            margin: 100px auto;

            /* 应用动画 */
            animation-name:xuhuan;
            animation-duration:2s;
            /* animation-delay: 2s; */
            /* animation-timing-function: linear; */
            /* animation-fill-mode:forwards; */
            animation-iteration-count: infinite;
            animation-direction:alternate-reverse;
        }

        .box:hover{
            animation-play-state: paused;
        }

        /* 定义动画 */
        @keyframes xuhuan{
            from{
                /* border-radius: 0px; */
                background:blue;
                transform:translateX(0);
            }to{
                transform:translateX(100px);
                /* transform:rotate(360deg); */
                /* border-radius: 50px; */
            }
        }
    </style>
</head>

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

</html>

百分比动画

from…to… 只能设置两个动画帧(两种状态)，如果想控制多种状态，可以使用百分比设置多个动画帧。

css语法：

@keyframes 动画名{

0%{

// 样式

}

n%{

// 样式

}

100%{

// 样式

}

}

示例：

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

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

        .box{
            width: 50px;
            height: 50px;
            background: #ccc;
            animation: multi 3s linear alternate infinite;
        }

        @keyframes multi {
            0%{
            }
            20%{
                transform:translate(100px,0px);
            }
            40%{
                transform:translate(100px,100px)   
            }
            60%{
                transform:translate(200px,100px)   
            }
            80%{
                transform:translate(200px,200px)    
            }
            100%{
                transform:translate(0px,200px)   
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Vinson-

关注

3
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
移动web知识总结（超详细）附带思维导图

移动web简介什么是移动web用于展示在移动设备上的网页(web)，称之为移动端页面。移动设备泛指手机、平板等设备。如何调试移动web页面一些浏览器为前端开发者提供了真机调试模拟环境。例如：chrome。打开开发者工具，点击手机图标即可切换到模拟环境。移动web发展历程从2014年10月HTML5标准规范最终发布后，移动web就迎来了飞速的发展。因为使用HTML5技术可以更方便更快捷的开发现代web应用程序而移动端的手机浏览器都是比较新的 HTML5在移动端的浏览器支持情况都.
复制链接

扫一扫