项目实战
一、flexible.js库
- 作用
- flexible是淘宝推出的弹性布局方案，可以解决移动端设备适配问题
- 功能
- 添加<meta>标签，并动态改写 <meta> 标签
- 给 <html> 元素添加 data-dpr 属性，并且动态改写 data-dpr 的值
- 给 <html> 元素添加 font-size 属性，并且动态改写 font-size 的值
-
flexible.js下载：https://github.com/amfe/lib-flexible
- 使用步骤
-
项目中引入flexible.js、视口标签不要写
-
css写法
- 单位大小都根据750设计稿的尺寸，转换成rem单位的值，转换方法为：设计稿尺寸 / 设计稿基准字体大小
- 设计稿基准字体大小 = 设计稿宽度 / 10，如设计稿宽为750，设计稿基准字体大小为75；设计稿宽为640，设计稿基准字体大小为64；（淘宝的方案是可以在任意设计稿尺寸下使用的）
二、 iScroll框架
- 解决痛点
-
iScroll会诞生，主要是因为无论是在iphone、ipad、android 或是更早前的移动webkit上都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容
-
上述情况导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header 或是footer再加上一个可以内容滚动的中间区域组成
-
iScroll框架解决的痛点就是可以模拟这个缺失的功能，提供了一种类似于原生的方式支持在一个固定高度的容器内滚动内容
- 官网
-
4版本最稳定，资料比较多，用起来方便
- 兼容性
- iPhone/Ipod touch >=3.1.1
- iPad >=3.2
- Android >=1.6
-
Desktop Webkit, Firefox, Opera 等
- 特性
- 拉动刷新、精确捕捉元素
- 速度和性能提升
- 兼容性问题
- 项目中主要作用
-
iScroll框架的本身功能-模拟app功能
-
处理移动端的兼容性问题，还能在速度和性能上提升项目
- 至于框架本身的参数方法我们这里不用
三、 Less使用
四、 动画库 animate.css库
- 解决痛点
- 自行设计比较复杂动画效果的时候，比较浪费时间，效率比较低
-
为了有效地去完成各种动画效果,于是就把比较常用的一些动画效果写到了一个动画库里面，方便大家去完成css3动画
- 简介
-
animate.css内置了很多典型的css3动画，兼容性好，使用方便，可以跨浏览器使用的一个动画库。很值得我们在需要写动画的项目中使用
- https://daneden.github.io/animate.css/
-
动画库使用方法
- 第一种
-
首先引入animate.css库文件
- 给指定的元素加上指定的动画样式名
- <div class="animated shake"></div> 这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现动画的元素都得添加这个类名。第二个是指定的动画样式名
- 如果说想给某个元素动态添加动画样式，可以通过jquery来实现
-
$('#demoId').addClass('animated shake')
- 第二种
-
不需引入animate.css库文件
- 通过效果展示找到所需动画名称，打开动画库，通过名称找到所需效果代码
-
把动画库中的效果代码直接拷贝到自己的css中
- 自己添加animation规则使用即可
- 两种方法比较：
- 第一种会造成代码冗余，使用起来简单
- 第二种不会有代码冗余，使用起来相对复杂，但是仍然推荐第二种方式