移动端：项目实战
项目实战
1、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；（淘宝的方案是能够在任意设计稿尺寸下使用的）
2、 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功能
-
处理移动端的兼容性问题，还能在速度和性能上提高项目
- 至于框架自己的参数方法咱们这里不用
3、 Less使用
4、 动画库 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规则使用便可
- 两种方法比较：
- 第一种会形成代码冗余，使用起来简单
- 第二种不会有代码冗余，使用起来相对复杂，可是仍然推荐第二种方式
相关文章
- 1. 移动web——微金所实战项目
- 2. vueJS+ES6开发移动端APP实战项目笔记
- 3. 一款基于 Vue 的问答移动端实战项目
- 4. 基于 Vue 和 TS 的 Web 移动端项目实战心得
- 5. 项目实训（八）移动端感悟
- 6. 项目实训（四）移动端梳理
- 7. 移动端 项目总结
- 8. vue移动端项目
- 9. 移动端项目构造（结合项目实际状况）
- 10. web前端-移动端HTML5微商城项目实战分享案例
- 更多相关文章...
- • Thymeleaf项目实践 - Thymeleaf 教程
- • Mozilla 项目 - 浏览器信息
- • Docker容器实战(一) - 封神Server端技术
- • Docker容器实战(八) - 漫谈 Kubernetes 的本质
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章