移动端+响应式开发

移动web第一天

** 字体图标、平面转换、渐变 **

01 字体图标

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

字体图标的优点：

• 灵活性：灵活地修改样式，例如：尺寸、颜色等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器
• 使用方便：
  1. 下载字体包
  2. 使用字体图标

图标库Iconfont：https://www.iconfont.cn/

字体图标：

• 字体图标展示的是图标，本质是字体。
• 处理简单的、颜色单一的图片

使用：

使用字体图标 - Unicode编码

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

使用字体图标 – 类名：

• 引入字体图标样式表
  
• 调用图标对应的类名，必须调用2个类名
  • iconfont类：基本样式，包含字体的使用等
  • icon-xxx：图标对应的类名
    

上传矢量图：

• 思考：如果图标库没有项目所需的图标怎么办？

• 答：IconFont网站上传矢量图生成字体图标

  1. 与设计师沟通，得到SVG矢量图
  2. IconFont网站上传图标，下载使用

• 上传 → 上传SVG图标

• 浏览本地图标 → 去除颜色提交

• 加入购物车 → 下载使用

02 平面转换

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

平面转换概念

• 平面转换
  • 改变盒子在平面内的形态（位移、旋转、缩放）
  • 2D转换
• 平面转换属性： transform
  

位移

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

• 语法
  • transform: translate(水平移动距离, 垂直移动距离);
• 取值（正负均可）
  • 像素单位数值
  • 百分比（参照物为盒子自身尺寸）
  • 注意：X轴正向为右，Y轴正向为下
• 技巧
  • translate()如果只给出一个值, 表示x轴方向移动距离
  • 单独设置某个方向的移动距离：translateX() & translateY()

位移-绝对定位居中

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

• 实现方法
  
  
• 核心代码
  
  
• 原理： 位移取值为百分比数值，参照盒子自身尺寸计算移动距离

旋转

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

• 语法
  transform: rotate(角度);
  注意：角度单位是deg
• 技巧：取值正负均可
  取值为正, 则顺时针旋转
  取值为负, 则逆时针旋转

转换原点

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

• 语法
  • 默认圆点是盒子中心点
  • transform-origin: 原点水平位置 原点垂直位置;
• 取值
  • 方位名词（left、top、right、bottom、center）
  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算）

多重转换

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

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

缩放

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

• 思考: 改变元素的width或height属性能实现吗？
• 语法
  • transform: scale(x轴缩放倍数, y轴缩放倍数);
• 技巧
  • 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
    • transform: scale(缩放倍数);
    • scale值大于1表示放大, scale值小于1表示缩小
      案例
• 播放按钮
  • 布局
    • ::after
  • 样式
    • 居中
  • 效果
    • 缩放
    • 透明度（opacity）

03 渐变

渐变背景

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

• 渐变是多个颜色逐渐变化的视觉效果

• 一般用于设置盒子的背景
  

• 透明渐变黑色语法：
  

移动Web 第二天

空间转换、动画

01 空间转换

空间转换

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

• 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
• 空间转换也叫3D转换
• 属性：transform

空间位移

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

• 语法
  • transform: translate3d(x, y, z);
  • transform: translateX(值);
  • transform: translateY(值);
  • transform: translateZ(值);
• 取值（正负均可）
  • 像素单位数值
  • 百分比

透视

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

• 思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

  • 答：近大远小、近清楚远模糊

• 思考：默认情况下，为什么无法观察到Z轴位移效果？

  • 答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

• 属性（添加给父级）

  • perspective: 值;
  • 取值：像素单位数值， 数值一般在800 – 1200。
  • 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

• 作用

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

空间旋转

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

• 语法
  • transform: rotateZ(值);
  • transform: rotateX(值);
  • transform: rotateY(值);
    
• 左手法则
  判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
  
• 拓展
  rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
  x，y，z 取值为0-1之间的数字

立体呈现

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

• 思考：使用perspective透视属性能否呈现立体图形？
• 答：不能，perspective只增加近大远小、近实远虚的视觉效果。
• 实现方法
  • 添加 transform-style: preserve-3d;
  • 使子元素处于真正的3d空间
• 呈现立体图形步骤
  1. 盒子父元素添加transform-style: preserve-3d；
  2. 按需求设置子盒子的位置（位移或旋转）
• 注意
  • 空间内，转换元素都有自已独立的坐标轴，互不干扰
    

02 动画

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

• 思考：过渡可以实现什么效果？
  • 答：实现2个状态间的变化过程
• 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
• 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
• 构成动画的最小单元：帧或动画帧

动画的实现步骤

1. 定义动画
   
2. 使用动画
   

动画属性

目标：使用animation相关属性控制动画执行过程

注意：

• 动画名称和动画时长必须赋值

• 取值不分先后顺序

• 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
  
  目标：使用steps实现逐帧动画
  
  
  

• 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

• animation-timing-function: steps(N)；

  • 将动画过程等分成N份

• 精灵动画制作步骤

  • 准备显示区域
    • 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
  • 定义动画
    • 改变背景图的位置（移动的距离就是精灵图的宽度）
  • 使用动画
    • 添加速度曲线steps(N)，N与精灵图上小图个数相同
    • 添加无限重复效果
      

• 多组动画

• 思考：如果想让小人跑远一些，该如何实现？
  答：精灵动画的同时添加盒子位移动画。

移动Web 第三天

移动端特点、百分比布局、Flex布局

01 移动端特点

• 移动端和PC端网页不同点
• 谷歌模拟器
• 分辨率
• 视口
• 二倍图

分辨率

目标：了解移动端主流设备分辨率

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

• PC分辨率
  • 1920 * 1080
  • 1366 * 768
  • ……
• 缩放150%
  • （1920/150%）*（1080/150%）
• 总结
  • 硬件分辨率（出厂设置）
  • 缩放调节的分辨率（软件设置）
    
• 分辨率分类
  • 物理分辨率是生产屏幕时就固定的，它是不可被改变的
  • 逻辑分辨率是由软件（驱动）决定的
    
• 思考：制作网页参考物理分辨率还是逻辑分辨率？
  • 逻辑分辨率
    
    

视口

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

• 手机屏幕尺寸都不同， 网页宽度为100%
• 网页的宽度和逻辑分辨率尺寸相同。

-思考：默认情况下，网页的宽度和逻辑分辨率相同吗？
-不同， 默认网页宽度是980px

• 目标：网页宽度和设备宽度(分辨率)相同。
• 解决办法：添加视口标签。
• 视口：显示HTML网页的区域，用来约束HTML尺寸。

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

二倍图

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

图片分辨率, 为了高分辨率下图片不会模糊失真

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

02 百分比布局

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

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

03 Flex布局

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

思考

• 多个盒子横向排列使用什么属性？
  • 浮动
• 设置盒子间的间距使用什么属性？
  • margin
• 需要注意什么问题？
  • 浮动的盒子脱标

Flex布局/弹性布局：

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

Flex布局模型构成

• 作用
  • 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
  • Flex布局非常适合结构化布局
• 设置方式
  • 父元素添加 display: flex，子元素可以自动的挤压或拉伸
• 组成部分
  • 弹性容器
  • 弹性盒子
  • 主轴
  • 侧轴 / 交叉轴

主轴对齐方式

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

• 思考：网页中，盒子之间有距离吗？

  • 答：有。
  • 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

• 修改主轴对齐方式属性: justify-content
  

• 修改主轴对齐方式属性: justify-content
  

侧轴对齐方式

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

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

伸缩比

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

• 属性
  • flex : 值;
• 取值分类
  • 数值(整数)

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

移动Web 第四天

01 Flex布局

主轴方向

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

• 思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？
• 答：水平方向。
• 思考：如何实现内容垂直排列？
• 主轴默认是水平方向, 侧轴默认是垂直方向
• 修改主轴方向属性: flex-direction
  

弹性盒子换行

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

• 思考：默认情况下，多个弹性盒子如何显示？
• 弹性盒子换行显示 : flex-wrap: wrap;
• 调整行对齐方式 ：align-content
  • 取值与justify-content基本相同
    

移动Web 第五天

移动适配

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

01 长度单位 （rem）

rem

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

• 网页效果

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

• px单位或百分比布局可以实现吗？

  • px单位是绝对单位
  • 百分比布局特点宽度自适应，高度固定

• 适配方案

  • rem
  • vw / vh

• rem单位

  • 相对单位
  • rem单位是相对于HTML标签的字号计算结果
  • 1rem = 1HTML字号大小

rem移动适配

• 思考
  1. 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
  2. 设备宽度不同，HTML标签字号设置多少合适？

rem移动适配 - 媒体查询

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

• 思考
  • 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
  • 媒体查询
• 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
• 当某个条件成立, 执行对应的CSS样式
• 写法:
  
• 思考
  • 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
  • 设备宽度不同，HTML标签字号设置多少合适？
    • 设备宽度大， 元素尺寸大
    • 设备宽度小，元素尺寸小

rem移动适配

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

rem适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

• 思考：

  • 工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px还是rem？
  • 如何确定rem的数值？

• rem单位尺寸

  1. 根据视口宽度，设置不同的HTML标签字号
  2. 书写代码，尺寸是rem单位
     1. 确定设计稿对应的设备的HTML标签字号
     • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
     2. rem单位的尺寸
     • N * 37.5 = 68 → N = 68 / 37.5
     • rem单位的尺寸 = px单位数值 / 基准根字号

flexible

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

• 思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗？
• 答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个
  
• flexible.js是手淘开发出的一个用来适配移动端的js框架。
• 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
  

02 Less

Less语法

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

• 思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？
• 答：除法运算。CSS不支持计算写法。
• 解决方案：可以通过Less实现。

Less

目标：使用Less语法快速编译生成CSS代码

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

编译插件

Easy Less :

• vscode插件
• 作用：less文件保存自动生成css文件
  
  注释：
• 单行注释
  • 语法：// 注释内容
  • 快捷键：ctrl + /
• 块注释
  • 语法：/* 注释内容 */
  • 快捷键： shift + alt + A

Less语法

运算：

• 加、减、乘直接书写计算表达式
• 除法需要添加 小括号 或 .
• 注意：
  • 表达式存在多个单位以第一个单位为准
    
    目标：能够使用Less嵌套写法生成后代选择器
    嵌套：
• 思考：书写CSS选择器时， 如何避免样式冲突？

嵌套：

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

• 语法：
  

• 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
  
  目标：能够使用Less变量设置属性值
  变量

• 思考：

  • 网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？
  • 方法一：逐一修改属性值（太繁琐）
  • 方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名
    
    变量

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

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

• 语法：

  • 定义变量：@变量名: 值;
  • 使用变量：CSS属性：@变量名;
    
    目标：能够使用Less导入写法引用其他Less文件

• 思考：

  • 开发网站时，网页如何引入公共样式？
    • CSS：书写link标签
    • Less：导入

• 导入: @import “文件路径”;
  
  目标：使用Less语法导出CSS文件

• 思考：

  • 目前，Less文件导出的CSS文件位置是哪里？
    

• 方法一：

  • 配置EasyLess插件， 实现所有Less有相同的导出路径

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

• 方法二：控制当前Less文件导出路径

  • Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
    

• 禁止导出

  • 在less文件第一行添加: // out: false
    

移动Web 第六天

01 实战演练（略）

02 长度单位（vw / vh）

vw / vh

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

• 相对单位
• 相对视口的尺寸计算结果
• vw：viewport width
  • 1vw = 1/100视口宽度
• vh：viewport height
  • 1vh = 1/100视口高度

vw适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

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

vh适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

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

rem 和 vw / vh 的区别

移动Web 第七天

响应式

媒体查询、BootStrap

01 媒体查询

基本语法

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

• 开发常用写法
• 媒体特性常用写法
  • max-width
  • min-width
    
• 完整写法
  

书写顺序

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

• min-width（从小到大）
• max-width（从大到小）
• 需求
  • 默认网页背景色是灰色
  • 屏幕宽度在768-992之间, 网页背景色是粉色
  • 屏幕宽度在992-1200之间, 网页背景色是skyblue
  • 屏幕宽度大于1200, 网页背景色是绿色
    

关键词

• and
• only
• not

媒体类型

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

媒体特征

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

基本语法

• 外链式CSS引入
  

02 BootStrap

UI框架

• UI框架概念
  • 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。
• 作用
  • 基于框架开发，效率高，稳定性高

BootStrap简介

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

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

BootStrap使用步骤

1. 下载：https://www.bootcss.com/
   首页 → BootStrap3中文文档 → 下载BootStrap

2. 使用步骤：

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

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

   • container：响应式布局版心类

BootStrap栅格系统

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

• 栅格化是指将整个网页的宽度分成若干等份
• BootStrap3默认将网页分成12等份
  
• .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
• .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
• 分别使用.row类名和 .col类名定义栅格布局的行和列。
  注意:

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

全局样式

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

• 布局样式
• 内容美化样式

手册用法：

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

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

• 布局类：表格

  • table : 基本类名, 初始化表格默认样式
  • table-bordered : 边框线
  • table-striped : 隔行变色
  • table-hover : 鼠标悬停效果
  • table-responsive : 表格宽溢出滚动
    

• 美化内容类：按钮

  • btn : 基准样式
  • btn-info; btn-success : 设置按钮背景色
  • btn-block : 设置按钮为块元素
  • btn-lg; btn-sm; btn-xs : 设置按钮大小

• 布局类：表单

  • form-control : 设置表单元素input, select, textarea的样式
  • checkbox 和 radio : 设置复选框和单选框的样式
  • form-inline : 设置表单元素水平排列
  • disabled : 设置表单禁用状态样式
  • input-lg; input-sm, input-sm : 设置表单元素的大小
    

• 美化内容类：图片

  • img-responsive: 图片自适应
  • img-rounded : 图片设置圆角
  • img-circle : 图片设置正圆
  • img-thumbnail : 图片添加边框线
    

• 布局类：辅助类

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

• 布局类：响应式工具（不同屏幕尺寸隐藏或显示页面内容）
  

组件

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

• 组件
  • BootStrap提供的常见功能，包含了HTML结构和CSS样式。
• 使用方法
  • 引入BootStrap样式
  • 复制结构，修改内容
    

Glyphicons字体图标

目标：使用Glyphicons字体图标实现网页中的图标效果

• Glyphicons字体图标的使用步骤
  • HTML页面引入BootStrap样式文件
  • 准备字体文件 (注意路径)
  • 空标签调用对应类名
    • glyphicon
    • 图标类

插件

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

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

插件使用

• 插件的使用步骤
  • 引入BootStrap样式
  • 引入js文件：jQuery.js + BootStrap.min.js
    
  • 复制HTML结构, 并适当调整结构或内容

定制

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

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