前端
windos
微信
数据库
移动开发
技术杂谈
评论
移动端:项目实战
# 移动开发
2024-05-05 22:20
0
279
来源:
云博客
项目实战
一、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规则使用即可
两种方法比较:
第一种会造成代码冗余,使用起来简单
第二种不会有代码冗余,使用起来相对复杂,但是仍然推荐第二种方式
0
相关文章
axios post后台接收不到参数
解决krpano全景视频在QQ浏览器、安卓不能正常播放的问题
移动端:Flex弹性盒布局
Android屏幕适配框架-(今日头条终极适配方案)
Android Studio – No cached version available for offline mode
HX125U-BT低频蓝牙RFID读卡器|ID卡采集器支持安卓、苹果手机即联即用
云博小周宇
投稿者
96804 篇文章
0 条评论
最近文章
数据格式转换 (三)Office文档转HTML
【转】Node.js到底是用来做什么的
20164317《网络对抗技术》Exp9 Web安全基础
linux web站点常用压力测试工具httperf
JSOI2016 最佳团体
Node.js 事件触发器详细总结
仿 MVC 三大特性
如何搭建一个简易的Web框架
js 原型里面写方法
css里的BFC用法
html之input
Apache开启GZIP压缩功能方法
Node.js 命令行工具的编写
前端性能优化成神之路-HTTP压缩开启gzip
How to use NetSuite SDF to download bundles/components
前端 HTML文档 详解
webstorm 支持vue element-ui 语法高亮属性自动补全
从零开始搭建服务器部署web项目
node.js密码加密实践
四: 使用vue搭建网站前端页面