移动 Web 开发

字体图标

目标：使用字体图标技巧实现网页中简介的图标效果

使用字体图标-Unicode 编码：

1. 引入样式表：iconfont.css
2. 复制粘贴图标对应的 Unicode 编码
3. 设置文字字体

1
2
3
4
5

span {
    font-family: 'iconfont';
}

<span>&#xe6eb</span>

使用字体图标-类名：

1. 引入字体图标样式表
2. 调用图标对应的类名，必须调用两个类名

1
2
3

<link rel="stylesheet" href="iconfont.css" />

<span class="iconfont icon-auto"></span>

上传矢量图：

如果图标库没有项目所需的图标，则可与设计师沟通，得到 SVG 矢量图，上传 SVG 图标，然后去除颜色提交，即可下载使用

平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

位移

目标：使用translate实现元素位移效果

语法：

1

transform: translate(x, y);

取值（正负均可）：

• 像素单位数值
• 百分比（参照物为盒子自身尺寸）

注意：X 轴正向为右，Y 轴正向为下

技巧：

• translate()如果只给出一个值，则表示 x 轴方向移动距离
• 单独设置某个方向的移动距离：translateX() & translateY()

绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

老方法：

1
2
3
4
5
6
7
8

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;

width: 200px;
height: 100px;

新方法：

1
2
3
4

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

原理：

位移取值为百分比数值，参照盒子自身尺寸计算移动距离

旋转

目标：使用rotate实现元素旋转效果

语法：

1

transform: rotate(角度); /* 角度单位为deg*/

技巧：

• 取值为正，则顺时针旋转
• 取值为负，则逆时针旋转

转换原点

目标：使用transform-origin属性改变转换原点

语法：

1

transform-origin: 原点水平位置 原点垂直位置;

取值：

• 方位名词（left、top、right、bottom、center）
• 像素单位数值
• 百分比（参照盒子自身尺寸计算）

多重转换

目标：使用 transform 复合属性实现多形态转换

语法：

1

transform: translate() rotate();

原理：

• 旋转会改变网页元素的坐标轴向
• 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放

目标：使用scale改变元素的尺寸

语法：

1

transform: scale(缩放倍数);

渐变

目标：使用background-image属性实现渐变背景效果

语法：

1

background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));

不透明度

语法：

1

opacity: 0-1; /* 0 表示完全透明，1 表示完全不透明 */

综合案例-华为

华为卡片

https://case.gahotx.cn/huawei/

空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

语法：

1
2
3
4

transform: translate3d(x, y, z);
transform: translateX(x);
transform: translateY(y);
transform: translateZ(z);

取值：

• 像素单位数值
• 百分比

透视

目标：使用perspective属性实现透视效果

语法：

1

perspective: 值; /* 添加给父级 */

取值：像素单位数值，数值一般在 800-1200

作用：空间转换时，为元素添加近大远小，近实远虚的视觉效果

空间旋转

目标：使用rotate实现元素空间旋转效果

语法：

1
2
3

transform: rotateZ(角度);
transform: rotateX(角度);
transform: rotateY(角度);

左手法则

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

拓展

• rotate3d(x, y, z, 角度)：用来设置自定义旋转轴的位置以及旋转的角度
• x, y, z 取值为 0-1 之间的数字

立体呈现

目标：使用transform-style: preserve-3d呈现立体图形

步骤：

1. 盒子父元素添加transform-style: preserve-3d
2. 按需求设置子盒子的位置（位移或旋转）

空间缩放

目标：使用 scale 实现空间缩放效果

语法：

1
2
3
4

transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

动画

目标：使用animation添加动画效果

• 过渡：实现两个状态间的变化过程
• 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

原理：

• 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
• 构成动画的最小单元：帧或者动画帧

步骤：

1.定义动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@keyframes 动画名称 {
  from {
    width: 200px;
  }
  to {
    width: 600px;
  }
}

@keyframes 动画名称 {
  0% {
    width: 200px;
  }
  50% {
    width: 400px;
  }
  100% {
    width: 600px;
  }
}

2.使用动画

1

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

注意：

• 动画名称和动画时长必须赋值
• 取值不分先后顺序
• 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

animation 相关属性：

逐帧动画

目标：使用 steps 实现逐帧动画

步骤：

1. 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
2. 改变背景图的位置（移动的距离就是精灵图的宽度）
3. 添加速度曲线 steps(N)，N 与精灵图上小图个数相同
4. 添加无限重复效果

1
2

/* 使用两组动画实现让小人先跑一段的效果 */
animation: run 1s steps(12) infinite, move 3s linear forwards;

视口

目标：使用 meta 标签设置视口宽度，制作适配不同设备宽度的网页

语法：

1

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• viewport：视口
• width=device-width：视口宽度=设备宽度
• initial-scale=1.0：缩放一倍（不缩放）

二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸

• 现阶段设计稿参考 iPhone6/7/8，设备宽度 375px 产出设计稿
• 二倍图设计稿尺寸 750px

百分比布局

目标：能够使用百分比布局开发网页

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

Flex 布局

目标：能够使用 Flex 布局模型灵活、快速的开发网页

特点：

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

作用：

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

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

组成部分：

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

主轴对齐方式

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

侧轴对齐方式

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

修改侧轴对齐方式属性：

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

伸缩比

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

语法：

1

flex: 值; /* 数值为整数 */

主轴方向

目标：使用flex-direction改变元素排列方向

弹性盒子换行

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

语法：

1

flex-wrap: wrap;

调整行对齐方式：align-content（取值与 justify-content 基本相同

移动适配

• rem：目前多数企业在用的解决方案
• vw / vh：未来的解决方案

rem

目标：能够使用 rem 单位设置网页元素的尺寸

效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）

原理：rem 单位是相对于 HTML 标签字号计算结果，1rem = 1HTML 字号

媒体查询

目标：能够使用媒体查询设置差异化 CSS 样式

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* 目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的 1/10 */
@media (width: 320px) {
  html {
    font-size: 32px;
  }
}

@media (width: 375px) {
  html {
    font-size: 37.5px;
  }
}

@media (width: 414px) {
  html {
    font-size: 41.4px;
  }
}
/* rem单位的尺寸 = px单位数值 / 基准根字号 */

flexible

目标：使用 flexible.js 配合 rem 实现在不同宽度的设备中，网页元素尺寸等比缩放效果

• flexible.js 是手淘开发出的一个用来适配移动端的 js 框架
• 核心原理就是根据不同视口宽度给网页中 html 根节点设置不同的 font-size

1
2
3
4
5

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

  <script src="./js/flexible.js"></script>
</body>

less

目标：使用 less 运算写法完成 px 单位到 rem 单位的转换

注释

单行注释：

• 语法：//注释内容
• 快捷键：ctrl + /

块注释：

• 语法：/* 注释内容 */
• 快捷键：shift + alt + a

运算

• 加、减、乘直接书写计算表达式
• 除法需要添加小括号或.

1
2
3
4
5
6
7

.box {
  width: 100 + 50px;
  height: 2 * 32px;

  width: (100 / 4px);
  height: 100 ./ 4px;
}

嵌套

1
2
3
4
5
6
7
8
9

.father {
  color: red;
  .son {
    width: 100px;
  }
  &:hover {
    color: green;
  }
}

其对应的 css 为：

1
2
3
4
5
6
7
8
9

.father {
  color: red;
}
.father .son {
  width: 100px;
}
.father:hover {
  color: green;
}

变量

目标：能够使用 less 变量设置属性值

1
2
3
4
5
6
7
8
9

@fontcolor: pink;

.box {
  color: @fontcolor;
}

a {
  color: @fontcolor;
}

导入

1
2
3

// 如果是less文件，可以省略后缀.less
@import "base.less";
@import "style";

导出

方法一：在vscode的setting.json中添加以下代码

1
2
3

"less.compile": {
    "out": "../css/"
}

方法二：less 文件第一行添加以下代码

1
2
3
4
5
6
7

/* 文件夹名称后面记得添加/ */
// out: ./css/

// out ./css/style.css

/* 禁止导出 */
// out:false

vw / vh

目标：能够使用 vw / vh 单位设置网页元素的尺寸

• 相对视口的尺寸计算结果
• vw（viewport width）：1vw = 1/100 视口宽度
• vh（viewport height）：1vh = 1/100 视口高度
• vw 单位尺寸 = px 单位数值 / (1/100 视口宽度)
• vh 单位尺寸 = px 单位数值 / (1/100 视口高度)

响应式网页

媒体查询

目标：能够根据设备宽度的变化，设置差异化样式

基本语法：

1
2
3
4
5

@media (max-width: 1200px) {
    body {
        background-color: pink;
    }
}

书写顺序：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* 因为CSS的层叠性，该绿色会被最下面的天蓝色层叠掉，不生效 */
@media (min-width: 1200px) {
    body {
        background-color: green;
    }
}
@media (min-width: 768px) {
    body {
        background-color: pink;
    }
}
@media (min-width: 992px) {
    body {
        background-color: skyblue;
    }
}

• min-width（大于等于）：从小到大
• max-widht（小于等于）：从大到小

完整写法：

1
2
3

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

媒体类型

媒体特性

外链式 CSS 引入

1
2

<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">

Bootstrap

目标：使用 Bootstrap 框架快速开发响应式网页

使用步骤：

1. 下载：https://www.bootcss.com/
2. 引入：<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
3. 调用 class 类：使用 Bootstrap 提供的样式

Bootstrap 栅格系统

目标：使用 Bootstrap 栅格系统布局响应式网页

• 栅格化是指将整个网页的宽度分成若干等份
• Bootstrap3 默认将网页分成 12 等份

• .container 是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认被指定宽度且居中，即版心
• .container-fluid 也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%
• 分别使用.row 类名和.col 类名定义栅格布局的行和列

注意：

1. container 类自带间距 15px
2. row 类自带间距-15px

全局 CSS 样式

目标：掌握 Bootstrap 手册用法，使用全局 CSS 样式美化标签

Bootstrap 中预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点

图片

1
2
3
4

<img src="..." alt="..." class="img-responsive"> <!-- 图片自适应 -->
<img src="..." alt="..." class="img-rounded"> <!-- 图片设置圆角 -->
<img src="..." alt="..." class="img-circle"> <!-- 图片设置正圆 -->
<img src="..." alt="..." class="img-thumbnail"> <!-- 图片添加边框线 -->

辅助类

• pull-left：强制元素左浮动
• pull-right：强制元素右浮动
• text-left 文：本左对齐
• text-right：文本右对齐
• text-center：文本居中对齐
• center-block：块元素居中
• clear fix：清除浮动元素的影响

组件

目标：使用Bootstrap 组件快速布局网页

使用方法：

• 引入 Bootstrap 样式
• 复制结构，修改内容

Glyphicons 字体图标

和 iconfont 使用方法类似，先引入对应的 CSS，然后再调用类名即可

1
2
3

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

<i class="glyphicon glyphicon-user"></i>

插件

目标：使用JavaScript 插件实现常见的交互效果

使用步骤：

1
2
3
4

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

定制

目标：能够根据项目需求定制 bootstrap 框架

定制步骤：

• 导航栏 → 定制
• 输入目标变量值
• 编译并下载，使用定制后的框架