移动web(看这一篇就够了)

移动web第一天🔥

今日学习目标

• 字体图标
• 平面转换
• 渐变

字体图标

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

1、字体图标的使用

步骤：1、登录iconfont官网，选择对应的字体图标添加到购物车

2、下载选择好的字体图标（添加到项目进行下载）

3、解压下载好的字体图标文件

4、把相关文件拖到项目文件夹中

5、按照提示使用字体图标

2、购物车案例

3、上传SVG矢量图

• 为何需要上传矢量图
  原因：iconfont字体图标库不一定能满足我们实际开发需求。
  解决：跟UI设计师沟通，获取图标相关的SVG矢量图，上传iconfont生成我们所需要的字体图标
• 上传SVG矢量图步骤
  1、登录iconfont字体库
  2、点击上传本地SVG文件
  3、去掉颜色后提交
  4、添加到购物车添加到项目
  5、下载相关代码使用
  

平面转换

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

1、平面转换概念

平面转换：改变盒子在平面内的形态（位移、旋转、缩放）

属性：transform

2、平面转换之位移

代码：

transform: translate(100px, 100px);

取值：1、像素+px

2、百分比（参照物为盒子自身尺寸）

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

技巧：1、translate()如果只给出一个值，表示x轴方向移动距离

2、单独设置某个方向的移动距离：translateX() & translateY()

• 位移-绝对定位居中

代码：

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

• 位移案例
  

3、平面转换之旋转

语法：

transform: rotate(旋转角度);

注意：角度单位是deg

技巧：1、取正值，则为顺时针旋转

2、取负值，则为逆时针旋转

• 设置旋转中心点

语法：

transform-origin: right bottom;

注意：盒子默认以中心点为旋转中心点

取值：1、方位名词（left、top、right、bottom、center）

2、像素单位数值

3、百分比（参照盒子自身尺寸计算）

• 多重转换

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

代码：

transform: translateX(600px) rotate(360deg);

案例：

4、平面转换之缩放

语法：

 transform: scale(x轴缩放倍数, y轴缩放倍数)

技巧：1、一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放

2、scale值大于1表示放大，scale值小于1表示缩小

• 缩放案例

渐变

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

代码：

background-image: linear-gradient(red, green, blue);

• 渐变案例

移动web第二天🔥

今日学习目标

• 空间转换
• 动画

空间转换（3D转换）

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

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

属性：transform

1、空间转换之位移

语法：

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

取值（正负均可）：1、像素单位值 2、百分比

取值（正负均可）：1、像素单位值  2、百分比

取值（正负均可）：1、像素单位值 2、百分比

2、透视效果

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

思考1：生活中，同一个物体，观察距离不同，视觉上有什么区别? 答：近大远小、近清楚远模糊

思考2：默认情况下，为什么无法观察到Z轴位移效果? 答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

• 透视属性
  属性：perspective
  取值：像素单位数值， 数值一般在800 – 1200。
  作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果
  

视距： 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

3、空间转换之旋转

• transform: rotateZ(度数)

• transform: rotateX(度数)

• transform: rotateY(度数)

• 左手法则

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

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

4、立体呈现

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

思考：使用perspective透视属性能否呈现立体图形?

答：不能，perspective只增加近大远小、近实远虚的视觉效果。

实现方法：添加 transform-style: preserve-3d;

作用：使子元素处于真正的3d空间

呈现立体图形步骤

1、盒子父元素添加transform-style: preserve-3d;

2、 按需求设置子盒子的位置(位移或旋转)

注意：空间内，转换元素都有自已独立的坐标轴，互不干扰

5、3D案例

实现思路

1、搭建立方体

2、过渡效果

6、空间转换之缩放

语法：

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

动画

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

思考：过渡可以实现什么效果? 答：实现2个状态间的变化过程

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

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

1、使用自定义动画

• 定义动画

代码：

/* 方式一 */
@keyframes 动画名称 {
  from {}
  to {}
}
/* 方式二 */        
@keyframes 动画名称 {
  0% {}
  10% {}
  50% {}
  100% {}
}

• 使用动画

代码：

animation: 动画名称 动画所花费的时长;

2、动画属性

动画文档:https://www.w3school.com.cn/cssref/pr_animation.asp

注意：1、动画名称和动画时长必 须赋值

2、取值不分先后顺序

3、如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

3、逐帧动画

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

• 补间动画（了解）

• 逐帧动画
  

• 案例

4、多组动画

语法：

移动web第三天🔥

今日目标

• 移动端特点
• 百分比布局
• Flex布局
• 实战演练

移动端特点

1、PC网页和移动网页的异同

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

2、谷歌模拟器

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

3、分辨率

• 屏幕尺寸（了解）
  指的是屏幕对角线的长度，一般用英寸来度量

• pc分辨率
  常见分辨率：1920 * 1080 或者 1366 * 768

注意：缩放150%以后分辨率为(1920/150%)*(1080/150%)

总结：1、硬件分辨率(出厂设置)

2、缩放调节的分辨率(软件设置)

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

• 移动端主流设备分辨率

     思考：制作网页参考物理分辨率还是逻辑分辨率?

     答案：逻辑分辨率

     移动设备常见分辨率：

4、视口

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

思考：手机屏幕尺寸都不同， 并且网页宽度为100%，那么网页的宽度和移动设备逻辑分辨率尺寸相同吗？如果不相同该如何设置？

答案：网页的宽度和移动设备逻辑分辨率尺寸是不相同，这时候我们需要添加视口标签来解决这一问题。

总结：视口的作用是让网页的宽度和设备的逻辑分辨率保持一致。

5、二倍图

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

• 什么是二倍图
  为了避免图片在移动端设备上出现失真现在，所以UI设计稿会按照iPhone6/7/8，设备宽度375px的二倍（750px）来产出设计稿

• 使用像素大厨软件测量二倍图中元素的尺寸

百分比布局

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

概念：百分比布局， 也叫流式布局

效果：宽度自适应，高度固定。

Flex布局

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

问题：以同学们现有知识如何进行以下页面布局？

浮动？外边距？那这种布局方式会带来哪些影响那？

1、Flex布局优势

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

2、Flex布局模型构成

• Flex布局作用

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

• 设置方式
  给父元素添加 display: flex，子元素可以自动的挤压或拉伸

• Flex布局模型组成部分
• 弹性容器
• 弹性盒子
• 主轴
• 侧轴/交叉轴

3、主轴对齐方式

属性名：justify-content

属性值：

注意：属性需添加到弹性容器

4、侧轴对齐方式

属性名：align-items

属性值：

注意：属性需添加到弹性容器

补充：align-self控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)

5、伸缩比

作用：按照比例来划分容器盒子的宽度

属性名：flex

属性值：数值（整数）

注意： 只占用父盒子剩余尺寸

实战演练

目标：使用Flex布局模型快速开发网页

移动web第四天🔥

一、主轴方向

1、修改主轴方向

思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？

答：水平方向。

思考：如何实现内容垂直排列？

主轴默认是水平方向，侧轴默认是垂直方向

修改主轴方向属性：flex-direction

2、flex-wrap实现多行排列

思考：默认情况下，多个弹性盒子如何显示?

弹性盒子换行显示：flex-wrap: wrap;

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

移动web第五天🔥

一、移动端适配

1、什么是移动端适配

2、移动端适配解决方案

• rem：目前多数企业在用的解决方案

• vw / vh：未来的解决方案

二、rem

1、rem初体验

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

2、rem基本使用

问题：px单位或百分比布局可以实现吗？

答案：不可以。1、px单位是绝对单位。 2、百分比布局特点宽度自适应，高度固定

rem单位特点：1、rem是相对单位

2、rem单位是相对于HTML标签的字号计算结果

3、1rem = 1HTML字号大小

3、rem配合媒体查询

思考： 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号?

媒体查询：1、媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

2、当某个条件成立， 执行对应的CSS样式

语法：

4、rem移动端适配

思考：设备宽度不同，HTML标签字号设置多少合适?

1、设备宽度大， 元素尺寸大

2、设备宽度小，元素尺寸小

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

5、rem布局流程

工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px还是rem?

流程：

1、根据视口宽度，设置不同的HTML标签字号

2、书写代码，尺寸是rem单位

• 确定设计稿对应的设备的HTML标签字号
  
• 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)
  
• rem单位的尺寸

• N*37.5=68 →N=68/37.5
• rem单位的尺寸 = px单位数值 / 基准根字号

6、flexible 配合rem

思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗?

答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个。

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

<!-- 通过 script 标签引入外部 js 文件 -->
<script src="./js/flexible.js"></script>

三、Less

1、Less 简介

思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的?

答：除法运算。CSS不支持计算写法。

解决方案：可以通过Less实现。

什么是Less：

• Less是一个CSS预处理器, Less文件后缀是 .less
• 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
• 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

2、Easy Less 插件

Easy Less 是一个 vscode插件，作用是当 less 文件保存自动生成 css 文件。

3、Less 注释

• 单行注释
  语法：// 注释内容
  快捷键：ctrl + /
  
• 块注释
  语法：/* 注释内容 */
  快捷键：shift+alt+A

4、Less 运算

• 加、减、乘直接书写计算表达式

// 加法
width: 100 + 10px;
// 减法
height: 100 - 20px;
// 乘法
width: 100 * 3px;

• 除法需要添加 小括号 或 .

// 除法，推荐使用小括号方式
width: (68 / 37.5rem);
// 或者
height: 68 ./ 37.5rem;

注意：表达式存在多个单位以第一个单位为准

5、Less 嵌套语法

作用：快速生成后代选择器。

语法：

// .父级选择器 {
//   .子级选择器 {
//   }
// }
.father {
  width: 300px;
  .son {
    font-size: 12px;
    &:hover {
      color: red;
    }
  }
  &::after {
    content: "1";
    display: block;
  }
}

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

6、Less 变量

思考：网页中，文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码?

方法一：1、逐一修改属性值（太繁琐）

2、把颜色提前存储到一个容器，设置属性值为这个容器名

方法二：把颜色提前存储到一个容器，设置属性值为这个容器名

变量：存储数据，方便使用和修改。

语法：定义变量：@变量名: 值;

使用变量：CSS属性:@变量名;

示例代码：

// 定义变量
@color: purple;
// 使用变量
.box {
  color: @color;
}

7、Less 导入

思考：开发网站时，网页如何引入公共样式?

CSS：书写link标签

Less：导入

Less 导入语法：@import "文件路径";

示例代码：

@import "01-体验less.less";
@import "02-注释";

8、Less 导出css

思考：目前，Less文件导出的CSS文件位置是哪里?

方法一（插件配置）：配置EasyLess插件， 实现所有Less有相同的导出路径

配置插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

方法二（单独路径）：控制当前Less文件导出路径

写法：Less文件第一行添加如下代码，注意文件夹名称后面添加 /\

示例代码：

// 导出到所配置的文件夹下
// out: ./abc/
// 导出到所配置的文件夹下并指定文件名
// out: ./qqq/common.css

9、Less 禁止导出

思考：所有的Less文件都需要导出CSS文件吗?

禁止导出：在less文件第一行添加：// out: false

示例代码：

// out: false

移动web第六天🔥

一、vw / vh

1、什么是vw、vh

vw、vh相对单位，相对视口的尺寸计算结果

vw：viewport width

• 1vw = 1/100视口宽度

vh：viewport height

• 1vh = 1/100视口高度

2、vw单位尺寸

• 确定设计稿对应的vw尺寸 (1/100视口宽度)
  查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度)
  
• vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

3、vh单位尺寸

• 确定设计稿对应的vh尺寸 (1/100视口高度)
  查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 (1/100 视口高度)
  
• vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

4、vw/vh 混用

思考：开发中，会不会vw和vh混用呢?

vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

移动web第七天🔥

一、响应式

1、什么是响应式网页

2、媒体查询

• 开发常用写法

• max-width
  
• min-width
  

书写顺序要求

• min-width（从小到大）
• max-width（从大到小）
• 需求：

• 默认网页背景色是灰色
• 屏幕宽度在768-992之间, 网页背景色是粉色
• 屏幕宽度在992-1200之间, 网页背景色是skyblue
• 屏幕宽度大于1200, 网页背景色是绿色

• 媒体查询完整写法

• 关键词

• and
• only
• not

• 媒体类型
  媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

• 媒体特性

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

• 外链式CSS引入

二、BootStrap

1、UI框架概念

概念：将常见效果进行统一封装后形成的一套代码, 例如:BootStrap。

作用：基于框架开发，效率高，稳定性高。

2、BootStrap 简介

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: https://www.bootcss.com/

3、BootStrap 下载

中文官网: https://www.bootcss.com/

首页 → BootStrap3中文文档 → 下载BootStrap

4、BootStrap 使用

1、引入：BootStrap提供的CSS代码

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

2、调用类：使用BootStrap提供的样式

<div class="container">1</div>

5、BootStrap栅格系统

栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成12等份

其他类名

• .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
  
• .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
• 分别使用.row类名和 .col类名定义栅格布局的行和列。
  注意：1、 container 类自带间距 15px
  2、 row 类自带间距 -15px
  

三、Bootstrap 使用

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

网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

1、表格

table : 基本类名, 初始化表格默认样式

table-bordered : 边框线

table-striped : 隔行变色

table-hover : 鼠标悬停效果

table-responsive : 表格宽溢出滚动

2、按钮

btn : 基准样式

btn-info; btn-success : 设置按钮背景色

btn-block : 设置按钮为块元素

btn-lg; btn-sm; btn-xs : 设置按钮大小

3、组件

直接参考官网api文档

步骤：1、引入BootStrap样式

2、复制结构，修改内容

4、字体图标

步骤：1、HTML页面引入BootStrap样式文件

2、引入标签，写入对应的类名

5、插件

思考：只有HTML和CSS的下拉菜单，单击后能弹出子菜单吗?

BootStrap 提供的常见效果, 包含了HTML结构，CSS样式与JavaScript：

使用步骤：1、引入BootStrap样式

2、引入js文件：jQuery.js + BootStrap.min.js

3、复制HTML结构，并适当调整结构或内容