移动Web开发（一）

移动Web

1 字体图标

1.1 字体图标的优点：

• 灵活性：灵活地修改样式，例如：尺寸、颜色等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器

2 平面转换

transform（实现元素的位移、旋转、缩放等效果）

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

使用translate实现元素位移效果

语法

• transform: translate(水平移动距离, 垂直移动距离); l

取值（正负均可）

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

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

技巧

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

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

方法一：

方法二：

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

2.1 使用translate实现元素位移效果（右侧盒子背景图）

右侧盒子背景图

• left：向左侧移动自身宽度
• right：向右侧移动自身宽度

2.2 使用rotate实现元素旋转效果

语法

• transform: rotate(角度);

• 注意：角度单位是deg

技巧：取值正负均可

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

2.3 使用transform-origin属性改变转换原点

语法

• 默认圆点是盒子中心点
• transform-origin: 原点水平位置 原点垂直位置;

取值

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

2.4 使用transform复合属性实现多形态转换

transform:translate() rotate();

多重转换原理

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

2.5 使用scale改变元素的尺寸

语法

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

技巧

• 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
• transform: scale(缩放倍数);
• scale值大于1表示放大, scale值小于1表示缩小

渐变

3 空间转换

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

属性：transform

语法

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

取值（正负均可）

• 像素单位数值
• 百分比

3.1 使用perspective属性实现透视效果

属性（添加给父级）

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

作用

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

3.2 使用rotate实现元素空间旋转效果

语法

• transform: rotateZ(值);
• transform: rotateX(值);
• transform: rotateY(值);

左手法则

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

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

实现方法

• 父元素添加 transform-style: preserve-3d;
• 使子元素处于真正的3d空间

使用scale实现空间缩放效果

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

4 动画

4.1 使用animation添加动画效果

定义动画：

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

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

注意：

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

4.2 使用animation相关属性控制动画执行过程

使用steps实现逐帧动画

4.3精灵动画制作步骤

准备显示区域

• 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

定义动画

• 改变背景图的位置（移动的距离就是精灵图的宽度）

使用动画

• 添加速度曲线steps(N)，N与精灵图上小图个数相同
• 添加无限重复效果
  

4.4 移动端特点

视口

视口 目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页 l 手机屏幕尺寸都不同， 网页宽度为100% l 网页的宽度和逻辑分辨率尺寸相同。

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

响应式布局的容器 固定宽度

超小屏时其宽度为 100%

bootstarp中页面元素一般需要用它或container-fluid容器来包裹

Bootstarp的缺点有哪些

会有兼容问题

组件的样式很少

响应式开发的原理

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