首页 > 移动开发 > 详细

移动端：项目实战

时间：2019-03-01 09:16:00 阅读：279 评论：0 收藏：0 [点我收藏+]

标签：desktop addclass 性能提升 ted 名称淘宝 nim 动画效果 css

项目实战

一、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框架解决的痛点就是可以模拟这个缺失的功能，提供了一种类似于原生的方式支持在一个固定高度的容器内滚动内容

官网

下载地址：http://cubiq.org/iscroll-4
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规则使用即可

两种方法比较：

第一种会造成代码冗余，使用起来简单
第二种不会有代码冗余，使用起来相对复杂，但是仍然推荐第二种方式

移动端：项目实战

标签：desktop addclass 性能提升 ted 名称淘宝 nim 动画效果 css

原文地址：https://www.cnblogs.com/guisenbin/p/10454423.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！