移动端：项目实战
其他
2019-03-01 09:08:03
阅读次数: 0
项目实战
一、flexible.js库
- 作用
- flexible是淘宝推出的弹性布局方案，可以解决移动端设备适配问题
- 功能
- 添加<meta>标签，并动态改写 <meta> 标签
- 给 <html> 元素添加 data-dpr 属性，并且动态改写 data-dpr 的值
- 给 <html> 元素添加 font-size 属性，并且动态改写 font-size 的值
-
- 使用步骤
-
项目中引入flexible.js、视口标签不要写
-
css写法
- 单位大小都根据750设计稿的尺寸，转换成rem单位的值，转换方法为：设计稿尺寸 / 设计稿基准字体大小
- 设计稿基准字体大小 = 设计稿宽度 / 10，如设计稿宽为750，设计稿基准字体大小为75；设计稿宽为640，设计稿基准字体大小为64；（淘宝的方案是可以在任意设计稿尺寸下使用的）
二、 iScroll框架
- 解决痛点
-
iScroll会诞生，主要是因为无论是在iphone、ipad、android 或是更早前的移动webkit上都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容
-
上述情况导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header 或是footer再加上一个可以内容滚动的中间区域组成
-
iScroll框架解决的痛点就是可以模拟这个缺失的功能，提供了一种类似于原生的方式支持在一个固定高度的容器内滚动内容
- 官网
- 兼容性
- 特性
- 拉动刷新、精确捕捉元素
- 速度和性能提升
- 兼容性问题
- 项目中主要作用
三、 Less使用
四、 动画库 animate.css库
- 解决痛点
- 简介
-
动画库使用方法
- 第一种
-
首先引入animate.css库文件
- 给指定的元素加上指定的动画样式名
- <div class="animated shake"></div> 这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现动画的元素都得添加这个类名。第二个是指定的动画样式名
- 第二种
-
不需引入animate.css库文件
- 通过效果展示找到所需动画名称，打开动画库，通过名称找到所需效果代码
-
把动画库中的效果代码直接拷贝到自己的css中
- 自己添加animation规则使用即可
- 两种方法比较：
- 第一种会造成代码冗余，使用起来简单
- 第二种不会有代码冗余，使用起来相对复杂，但是仍然推荐第二种方式
转载自www.cnblogs.com/guisenbin/p/10454423.html