您当前的位置:365bet > HTML5 / CSS3 >

摘要: 去年年底

发布时间:2019-01-05 20:19编辑:admin1阅读(

      摘要: 元旦在公司撸码,想起圣诞节的摇摇乐项目有段代码挺有意思的,借着空闲的时间把代码抽出来,沉淀下经验。冬天来了,设计师说摇摇乐的场景需要随机下落的雪花动画,第一时间就想到的方法是canvas比较好,项目非常紧急,然而小程序对canvas支持不够友好,容易在项目中出现无法预估的兼容性问题,马上又否定了这阅读全文

      摘要: 原文地址:随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验 video的属性 src: 视阅读全文

      摘要: 7月份在部门内给设计中心的同事们带来《让H5页面适配移动设备全家 - 设计师篇 - PPT》的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同时也提升页面体验,分享后跟设计师们沟通,反应情况良好,说明这套适配的方案是有一定价值的。在9月份很荣幸收到TID...阅读全文

      posted @2015-10-23 13:00白树 阅读(8173)

      摘要: 最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神的笔录,游戏也是人生,懂得思考的人生才会不断促使自己进步,详细我不清楚了,大概意思是这样:人这一辈子阅读全文

      posted @2015-08-19 13:19白树 阅读(12469)

      摘要: 上一篇文章《pageResponse - 让H5适配移动设备全家》中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持。在此之前也在部门前端组内做了分享,后来师傅跟我聊了下,其实现在前端和设计的合作上经常遇到页面适配问题,在沟通上影响工作效率,在页面设...阅读全文

      posted @2015-07-09 16:31白树 阅读(5138)

      【原】pageResponse - 让H5适配移动设备全家(移动端适配)

      摘要: 上一篇文章《为什么选择iPhone5的分辨率作为H5视觉稿尺寸》最后留下了问题:是否需要视觉设计师设计多套的视觉稿供给前端工程师做页面适配呢?按照自己以前的方法,通常会要求设计师设计2套的尺寸,一套是窄屏手机(如iPhone4),另一套是宽屏手机(如iPhone5),这样的好处不仅减少重构页面的适配阅读全文

      posted @2015-06-19 14:25白树 阅读(32441)

      摘要: 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题、高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络,页面打开慢 低端机性能差——页面操作卡顿 HTML5新技术多——学习成本不低 未知问题——坑多 面对这些问题,一开始我们只阅读全文

      posted @2015-03-03 14:20白树 阅读(97299)

      摘要: 本月26号参加webrebuild深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考。专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成任务的想法可能会比较多,而想做得更好,需不惜花费时间精力,孜孜不倦,反复改进产品,把99%提高到99...阅读全文

      posted @2014-12-29 19:00白树 阅读(20253)

      摘要: 11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的”购物节“...阅读全文

      posted @2014-11-13 14:48白树 阅读(573124)

      摘要: 北京时间2014年9月10日凌晨1点,苹果公司正式发布其新一代产品 iPhone6,相信做webapp开发的同学对它是充满了好奇和等待,也担心它带来各种坑爹,高清的分辨率,升级的retina显示屏,我们该如何做好适配呢?相比iPhone5,iPhone6拥有更高分辨率的retina HD displ...阅读全文

      posted @2014-09-12 16:34白树 阅读(15879)

      摘要: 今年3月份,由于公司业务需要,我转岗到微信产品部,离开了TID团队,人都是有感情的动物,更何况在一个团队呆了快 3 年,心中十分舍不得,鬼哥说了“天下没有不散的宴席...”,在我的世界里又多了一次离别的伤感(虽然还在隔壁工作)。加入了微信产品中心后,开始新的团队生活,工作比以前忙多了,有时周六也要上阅读全文

      posted @2014-04-26 10:36白树 阅读(39961)

      摘要: 回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,我就惊呆了,还跟产品争执一番。后来了解到的手机系统 ios、andr...阅读全文

      posted @2014-03-12 14:29白树 阅读(61547)

      摘要: 做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬。忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素。html5 新增的结构元素,有的经常使用到,有的用不上,当页面禁用样式后,它们的展现跟 div 是没撒差别,...阅读全文

      posted @2014-03-06 18:18白树 阅读(4205)

      摘要: 有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同、版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓阅读全文

      posted @2014-02-18 18:28白树 阅读(57298)

      【原】如何改变表单元素的外观(for Webkit and IE10)

      摘要: 表单元素在网页设计中使用的非常频繁,如文本输入框、单选框、复选框、选择列表、上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的外观,使用自定义的,对于产品本身来说这样的要求是加分项,开发在力所能及的范围内应该大力支持。做H5移动开发,并没有原生APP开发那样,大部分内容都可以自定义,移动端H5页面受手机系统的影响,不同的浏览厂商对表单元素的渲染效果差异很大。下图为 iphone4s 、魅族 android4.4 、诺基亚 winphone8 三部测试机下4种不同表单元素的默认外观展现。从上图我们可以看出:表单输入框有默认阅读全文

      posted @2014-01-19 22:03白树 阅读(10349)

      摘要: 特别声明:此篇文章由David根据Charles Morris的英文文章原名《Adapting your WebKit-optimized site for Internet Explorer 10》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。英文出处:中文译文:阅读全文

      posted @2014-01-08 23:34白树 阅读(1053)

      摘要: 国外一篇文章,有点意思,转载过来,准备尝试下~中文地址:原文地址:你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。在桌面端和移阅读全文

      posted @2014-01-08 09:29白树 阅读(23788)

      摘要: 微信 Android 5.1 和 iPhone 5.1 已正式发布了,据说本12月底,微信将推出 Winphone 5.0版本,全面支持微信支付,它绑定 IE10 浏览器,那么做微信公众号的 H5 页面,除了做好 webkit 兼容外,IE10 的兼容也是必不可少的。曾经写过《常见CSS3属性对ios&android&winphone的支持》一文,当时写过对Windows Phone 7 和Windows Phone 8的对应的浏览器分别是IE9和IE10做好兼容,但由于产品的特性对 Winphone 支持不友好,项目组也没有对 IE9 和 IE10 进行特别的处理,现在微信支阅读全文

      posted @2013-12-30 17:32白树 阅读(3263)

      摘要: 接近年底了,又到产品们赶KPI的时间,开发也跟着辛苦,于是连续加班了4个星期,项目总算有点起色,也终于挤出点时间,写篇文章,just for fun ~高清显示屏原理,之前在团队内做过的一个类似的分享,因为上次有园友问了我手机端css sprite的设计原理,不知道手机端的图片为什么是用2倍大,背景...阅读全文

      posted @2013-11-26 14:36白树 阅读(14573)

      摘要: 干货来了,在于提升用户体验,非常实用,做webapp的童鞋不要错过~本文由99根据Kyle Peatt的《A Beginners Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App》所译英文出处:中文译文:阅读全文

      posted @2013-10-28 23:24白树 阅读(2311)

      摘要: 说到两端对齐,大家并不陌生,在word、powerpoint、outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。 响应式网页设计出现以来,更多是使用百分比布自适应布局,特别是在移动端,两端对齐的方式阅读全文

      posted @2013-08-30 09:42白树 阅读(204989)

      【原】常见CSS3属性对ios&android&winphone的支持

      摘要: 2个月前,我在博文《webapp开发中兼容Android4.0以下版本的css hack》中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了”,在这里纠正下,在目前Wepapp开发中,主要对webkit内核的手机做好各个版本的兼容已经不够了,像其它的高端智能手...阅读全文

      posted @2013-08-03 13:56白树 阅读(14889)

      【原】webapp开发中兼容Android4.0以下版本的css hack

      摘要: 话说现在的手机型号越来越多,主要还是android和ios这2个巨头称霸了江湖,而他们自带的浏览器内核是webkit,那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了,看起来很简单,其实背后还有一个大坑等着你。虽说是webkit内核,但页面的展现效果还会受到自身系统的影响,升级后的系统打了补丁,新增了新的属性,支持更多丰富炫丽的效果,那么旧的系统(未升级的)就不支持一些新的属性,开发哥哥就是没有做好低端版本兼容的话,就会产生所谓的bug的,再加上android和ios系统各个版本也会带私有属性或者少带某个属性,于是坑爹的东西就这样产生,各种奇葩的bug,仿佛又阅读全文

      posted @2013-06-26 15:39白树 阅读(9580)

      摘要: 用ZenCoding这么久了,总结下常用CSS3的写法,方便以后查找: t {}@mbox-sizing:border-box;bxz:bbbox-shadow:;bxsh-webkit-box-shadow:0 0 0 #000;bxsh:wborder-radius:;bdrsbackground-size:;bgzbackground-size:auto;bgz:acontent:;cttext-shadow:0 0 0 #000;tsh+阅读全文

      posted @2013-06-20 15:14白树 阅读(1000)

      【原】使用iScroll.js解决ios4下不支持position:fixed的问题

      摘要: 一直折腾position:fixed在ios和android的使用,而事实上这么上流的ios4系统居然不支持position:fixed,幸运的是苹果公司在ios5系统修复了这个bug,比较理想的解决方案是让所有用户把系统升级到ios5及以上版本,这种想法在国外还好,在国内环境下,因为越狱而不想去升级手机的人很多,如果强迫用户去升级,那可能会把你的产品KS了。而你也不可能跟你老板说ios4什么不兼容那个属性啊,让用户升级啊!老板看到的是结果,你做不出来,别人怎么做得出来呢,这样你老板可能会对你的能力感到怀疑,或者认为你并不专业......那其实回到头来我们还是乖乖去做好兼容,要么就找到完美的解阅读全文

      posted @2013-06-14 15:21白树 阅读(17189)

      摘要: Png是图像文件存储格式,在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它,如常用CSS 雪碧图。而Png的使用不仅仅如此,Png有多少种格式,有哪些特点,PC端中常用的Png格式是哪些,手机端最合适的Png格式是什么呢?如果你对这些问题有疑问,那么很开心的告诉你,这里有你需要的答案(*...阅读全文

      posted @2013-05-30 17:54白树 阅读(12003)

      摘要: 在手机webkit浏览器中,用户在某一些按钮上长按3秒钟后,会弹出一个系统的列表,ios和android各自展现不一样,列表可以有复制或在在新窗口打开的等操作,这种体验对于按钮来说是不需要的,按钮上是绑定事件,有特殊功能,而这里系统把它当做一个链接的意义。查看了代码,原来是一个a标签,链接地址为空。a href=# class=btn查看余额/a找了资料后,ios平台有个解决办法可以通过控制当前元素的-webkit-touch-callout的样式属性为none;属性来禁止触发系统的菜单a{-webkit-touc阅读全文

      posted @2013-04-28 11:49白树 阅读(3466)

      摘要: 大概是上个月,使用YUI压缩一个css文件后,发现只要是被压缩后的css文件有部分根本无法工作,一直都不知啥问题引起的,让我感到头疼。今天发现了只要是在媒体查询中的样式无法起作用,于是才开始怀疑是media被压缩后引起的bug,对YUI压缩不得不产生成疑问后来谷歌了:果然是YUI引起的bug:上面的图片解释为:如果电脑的YUI compressor还是旧的版本,压缩中,YUI compressor将media中的and后面重要的空格给删除了,导致media queries失效。后来我查看了电脑的YUI版本,我擦,居然是2009年8月份,严重out了- - 亲!要与时俱进啊!365bet体育平台下载个最新版本后终于阅读全文

      posted @2013-04-18 18:53白树 阅读(1432)

      摘要: 这篇文章原文地址不知道在哪里!不管怎么样,对我的学习还是有帮忙,先收藏了。Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。1. 新的Doctype声明XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器阅读全文

      posted @2013-03-28 16:12白树 阅读(1422)

      摘要: 近期接触了HTML5本地缓存,在HTML页面的html标签加入后缀为.appcache的文件,即可以轻松地创建 web 应用的离线版本。使用本地缓存带来的好处:离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。浏览器支持:所有主流浏览器均支持应用程序缓存,除了 IEHTML5 Cache Manifest 实例下面的例子展示了带有 cache manifest 的 HTML 文档(供离线浏览):HTML页面demo.appcache文件Cache Manifest 基础如需启用应用程序缓存,请在文档的 阅读全文

      posted @2013-03-28 15:36白树 阅读(2492)

      【原】[webkit移动开发笔记]之兼容iPhone4和iPhone5的方法

      摘要: 2012年8月份刚开始接触前端移动开发,现在主要是android和ios系统的手机,一套代码需要同时兼容android和ios,就android而言已经有N个型号的手机,如果css代码在这些手机上解析有稍微差别或者出现bug,那么,做兼容是必不可少,事实上随着手机版本的不断更新,产生一些不同的体验,这也可以理解为制造了bug~半年多了,遇到了不少问题,解决问题的过程即辛苦又很开心,辛苦是因为刚接触,很多知识都不懂,需要花费很多的时间去摸索遇到的困难,开心呢当然是接触到新鲜的手机开发,感到比较兴奋,学习了不少知识。好了,不多说,开始本次的主题,今天主要对iphone手机的兼容方法做总结。摘要:[阅读全文

      posted @2013-03-21 10:43白树 阅读(5626)

      摘要: 张鑫旭博客的一篇css3盒模型文章,对我而言,实用价值挺大的,多次重复打开该文章学习,这一次决定转载到我的博客!一、淡淡的开头语昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马,于是习惯性谷歌之,真是不谷不知道,一谷吓一跳。倒不是该属性本身,而是此属性作为导火索,让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样的流体布局控而言,这种盒子模型的出现就好比打麻将杠上开花杠到绝张边七条,让人兴奋不已。在国外,弹性盒阅读全文

      posted @2013-03-13 22:20白树 阅读(1052)

      【原】[webkit移动开发笔记]之空链接是使用javascript:void(0)还是使用#none

      摘要: 基于webkit内核的移动开发笔记,之前已经写过4篇,主要是关于移动开发重构的分享,今晚有空了再写一篇。回忆去年年底最后的一个项目,还有一个很怪异的bug,让项目团队的成员感到十分头疼。测试组的同事做完最后的测试回归后,项目发布上线,并通过微信推送链接。在ios系统中(android显示正常),微信内页打开链接后,点击页面的一个按钮,页面被重新加载了,这时才可以对页面进行其它操作。再次不断测试后,我们这边的同事肯定是微信软件内部配置引起的,可是微信的同事也无法定位具体的问题......纠结了很久....后来啊,想到各种蛋碎,才知道是a标签的引起的a href=#none&q阅读全文

      posted @2013-03-08 00:03白树 阅读(3537)

      【原】[webkit移动开发笔记]之如何去除android上a标签产生的边框

      摘要: 去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段,发现了不少bug,为了不影响回家时间,加班加点也要解决这些问题,这里算是工作回忆,也算是工作的一点小总结。在ios4+和android2+系统,当手指触摸屏幕a标签链接或按钮时,会产生不同的效果,对于ios点击元素的时候,就会出现一个半透明的灰色背景;对于android则出现红色的边框。对这2个系统自带的效果,这种体验的意义无非为了告知用户按钮已经点击到,带来的价值是好的。可惜带来了体验的同时,也带来了bug......主要是在android手机的一个bug使用css给模块设置了opacity:0,控制该模块隐藏,如果该模块包含a标阅读全文

      posted @2013-02-28 12:29白树 阅读(13975)

      摘要: 关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错。随着Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的Retina屏幕显示依然清晰,曾经一度困扰着网页开发者,好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?什么是响应式图片?响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。CSS3 响应式图片对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Re阅读全文

      posted @2013-02-19 20:51白树 阅读(3498)

      摘要: 谈到渐变,大家并不陌生,设计稿中经常会遇到,其中最常见的也最平凡使用的是线性渐变和径向渐变,在pc端开发,很多大型网站都需要考虑所有浏览器的兼容,通常如渐变的按钮或者背景图一般会被重构师们切成图片,而在移动开发中如果使用图片是很占流量,能不用图片尽量不使用,那么,CSS3来实现无图的渐变效果是首选的。本文以移动开发中遇到的一个径向渐变例子,讲解CSS3径向渐变在项目中的应用和以及需要注意的地方。一、径向渐变的基础知识径向渐变的概念:从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)。二、径向渐变的基本语法background-image:-webkit-gradient(type,x1 y1阅读全文

      posted @2013-02-17 21:26白树 阅读(8136)

      摘要: HTML5新增了video元素和audio元素,替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。这次的一个项目,产品经理要求手机加载开始时播放音乐,想到播放音乐,又是在ios和android平台,那audio元素必然是首选。一、audio的基本知识audio:标签定义声音,比如音乐或其他音频流。二、audio的属性三、audio的写法写法一:你的浏览器还不支持哦写法二:优先播放音乐baishu.ogg,不支持在播放baishu.mp3四、audio实战在项目中使用audio,一开始在chrome浏览器下做测试,使用了autoplay和loop属性,在页面打开阅读全文

      posted @2013-02-05 17:03白树 阅读(19961)

      摘要: Chrome浏览器,相信大家并不陌生,该浏览器是基于其他开放原始码软件所撰写,包括WebKit和Mozilla,以其简单、快速、安全、稳定、扩展丰富等特性受到了不少人的喜爱,2012年8月6日,Chrome已达全球份额的34%,成使用最广浏览器。Chrome浏览器提供了非常简单方便的开发人员工具,方便我们在PC端做手机开发,那么如何是如何在PC上做简单的手机页面开发呢?首先下载chrome最新版本版本 24.0.1312.56(有些旧版的缺少一些功能,建议更新到最新版本),然后在Chrome浏览器中打开某个页面,选定网页元素(如通栏、文字、图片等),按鼠标右键,从右键菜单中选择“审查元素”,就阅读全文

      posted @2013-01-30 18:12白树 阅读(4298)