摘要: 原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧,能在 阅读全文
posted @ 2016-07-18 17:50 ヤTop灬ヽ 阅读(273) 评论(0) 推荐(0) 编辑
摘要: 原文地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时 阅读全文
posted @ 2016-07-18 16:22 ヤTop灬ヽ 阅读(168) 评论(0) 推荐(0) 编辑
摘要: function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } } 阅读全文
posted @ 2016-07-18 16:16 ヤTop灬ヽ 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 一、手机上的触摸事件 基本事件: touchstart //手指刚接触屏幕时触发touchmove //手指在屏幕上移动时触发touchend //手指从屏幕上移开时触发 下面这个比较少用:touchcancel //触摸过程被系统取消时触发 每个事件都有以下列表,比如touchend的target 阅读全文
posted @ 2016-07-18 16:09 ヤTop灬ヽ 阅读(206) 评论(0) 推荐(0) 编辑
摘要: 除非你的应用程序限定了只在移动设备直立状态或水平状态下使用,一般情况下,你需要调整一些设定。即便你设计的布局流畅时尚,你可能需要改变某些编程代码。通常有以下一些小的策略用于检测移动设备方向的改变。 orientationchange事件 你等待一个移动API,一个简单的窗口orientationch 阅读全文
posted @ 2016-07-18 15:59 ヤTop灬ヽ 阅读(388) 评论(0) 推荐(0) 编辑
摘要: js判断屏幕横竖屏: ipad: 90 或 -90 横屏 ipad: 0 或180 竖屏 Andriod:0 或180 横屏 Andriod: 90 或 -90 竖屏 iphone 、ipad禁止横竖屏切换、强制横竖屏 阅读全文
posted @ 2016-07-18 15:55 ヤTop灬ヽ 阅读(4085) 评论(0) 推荐(0) 编辑
摘要: 横竖屏切换检测 移动端Web开发如何处理横竖屏 阅读全文
posted @ 2016-07-18 15:53 ヤTop灬ヽ 阅读(557) 评论(0) 推荐(0) 编辑
摘要: 今天在某个群里面闲逛,看见一个童鞋分享了一个携程的移动端的页面。地址这里我也分享下吧:http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标来代替,有些图标不多的时候就自己单个的切出来控制了。 看了下携程的手机端的网站这些图标是用了雪碧图来合 阅读全文
posted @ 2016-07-18 15:50 ヤTop灬ヽ 阅读(238) 评论(0) 推荐(0) 编辑
摘要: 很多前端工程师在开发手机页面的时候,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,于是就惊呆了,还跟产品争执一番。实际上手机系统 ios、android 等是不支 阅读全文
posted @ 2016-07-18 14:56 ヤTop灬ヽ 阅读(2115) 评论(0) 推荐(0) 编辑
摘要: 原文:http://www.grycheng.com/?p=2411 微信 webview 内置了调整字体大小的功能,对于网页的可用性来说是一个很实用的功能。一些网页的字体设置过小导致用户看不清文字,调整字体大小即可解决这个问题。 但是对于一些追求显示效果的移动端页面来说,字体大小的调整可能会导致部 阅读全文
posted @ 2016-07-18 13:48 ヤTop灬ヽ 阅读(307) 评论(0) 推荐(0) 编辑
摘要: 原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验。抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压 阅读全文
posted @ 2016-07-18 13:33 ヤTop灬ヽ 阅读(392) 评论(0) 推荐(0) 编辑
摘要: 什么是rem 参照 详解移动端rem变革 在我看来,rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的。 我们的设计图往往宽度是640或者其他尺寸的,不过我建议 阅读全文
posted @ 2016-07-18 13:30 ヤTop灬ヽ 阅读(195) 评论(0) 推荐(0) 编辑
摘要: 研究移动端页面已经有许久了,一直执着于rem来开发,不谈性能怎么样,单从工作效率上看影响了不少,首先要固定设计稿的宽度,一般都是固定在640px,然后在根据根目录的字体大小来计算出每个元素的rem的值,无疑在开发中切图,每个元素都要去计算一边,是不是感觉很麻烦,有没有一种方法,像切PC端页面一样,切 阅读全文
posted @ 2016-07-18 13:14 ヤTop灬ヽ 阅读(996) 评论(1) 推荐(0) 编辑
摘要: 做移动web开发免不了用微信扫描页面来进行调试,android版微信浏览器一直都默认缓存html静态资源,每次静态资源变化甚至新内容发布的时候在微信浏览器上都极有可能不能更新,很多时候要清理微信缓存才能看到效果,很是烦人。部分客户装了QQ浏览器,微信实际调用的是QQ浏览器,有时候甚至光清理微信缓存都 阅读全文
posted @ 2016-07-18 12:12 ヤTop灬ヽ 阅读(332) 评论(0) 推荐(0) 编辑
摘要: 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO1,加载底部 DEMO2,加载顶部、底部 DEMO3,固定布局,加载顶部、底部 使用方法 引用css 阅读全文
posted @ 2016-07-18 12:00 ヤTop灬ヽ 阅读(769) 评论(0) 推荐(0) 编辑
摘要: 1. rem单位方式,用法当前像素除以100。 2. px单位方式,以640px设计图比例实现。 3.px单位方式,以设计图640除以2实现。 4.px单位方式及media媒体查询方式实现,判断最大、最小方式实现,设计图还是640标准。 注,第一种、二种方式是现在比较好用的 阅读全文
posted @ 2016-07-17 21:36 ヤTop灬ヽ 阅读(188) 评论(0) 推荐(0) 编辑
摘要: Yeoman帮助我们创建项目,提供更好的工具来使我们的项目更多样化。 Yeoman提供generator系统,一个generator是一个插件,在我们在一个完整的项目上使用‘yo’命令时,会运行该generator。通过这些官方的Generators,推出了Yeoman工作流,工作流是一个健壮、有自 阅读全文
posted @ 2016-07-16 02:00 ヤTop灬ヽ 阅读(146) 评论(0) 推荐(0) 编辑
摘要: 一、jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势。 2. 全局函数法 可以把自定义的功能函数独立附加到jQuery命名空间下,从 阅读全文
posted @ 2016-07-15 11:22 ヤTop灬ヽ 阅读(140) 评论(0) 推荐(0) 编辑
摘要: 原文地址:http://www.cnblogs.com/yexiaochai/p/3603389.htmlgrunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件,初学... 阅读全文
posted @ 2015-09-22 23:44 ヤTop灬ヽ 阅读(95) 评论(0) 推荐(0) 编辑
摘要: 最近开始给网站的移动版本做技术选型,发现了很多好玩的东西,写出来给大家分享下。ionicFramework我是hybrid app的忠实粉丝和大力倡导者,从新浪移动云开始就不断的寻找能帮助Web程序员开发出漂亮又好用的UI层框架。在历经了jqmobile、sencha touch等框架后,一直没能找... 阅读全文
posted @ 2015-06-23 14:13 ヤTop灬ヽ 阅读(586) 评论(0) 推荐(0) 编辑