随笔分类 -  html5

摘要:单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)使用inline-block 和 text-align实现.parent{t... 阅读全文
posted @ 2015-12-26 15:24 axl234 阅读(4991) 评论(0) 推荐(0)
摘要:常见的问题问题:手机端click事件会有大约300ms的延迟原因:手机端事件touchstart--\>touchmove-->touchendortouchcancel-->click,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触... 阅读全文
posted @ 2015-12-26 14:57 axl234 阅读(314) 评论(0) 推荐(0)
摘要:rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in windo... 阅读全文
posted @ 2015-12-25 10:24 axl234 阅读(503) 评论(0) 推荐(0)
摘要:移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。 ... 阅读全文
posted @ 2015-12-24 17:47 axl234 阅读(287) 评论(0) 推荐(0)
摘要:HTML语义HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。 Blog post Published: 21st Feb, 2015 … Blog post Published: ... 阅读全文
posted @ 2015-12-18 19:20 axl234 阅读(271) 评论(0) 推荐(0)
摘要:SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。准备工作首先我们必须将SweetAlert插件的js文件和css文件引入到页面... 阅读全文
posted @ 2015-11-26 11:47 axl234 阅读(4183) 评论(0) 推荐(0)
摘要:这是一款不依赖任何js框架、纯javascript实现的画廊效果。它支持移动设备手势操作,如手势触摸滑动、放大和关闭图片,它还支持PC上的键盘操作,总之它是WEB开发者不可或缺的图片画廊插件,它叫photoswipe。HTML首先加载所需的CSS和js文件。以上文件大家不要担心,月光光都打包好了,您... 阅读全文
posted @ 2015-11-26 11:46 axl234 阅读(470) 评论(0) 推荐(0)
摘要:CSSREM一个CSS的px值转rem值的Sublime Text 3自动完成插件。插件效果如下:安装下载本项目,比如:git clone https://github.com/flashlizi/cssrem进入packages目录:Sublime Text -> Preferences -> B... 阅读全文
posted @ 2015-11-21 14:47 axl234 阅读(3279) 评论(0) 推荐(0)
摘要:在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth、微信浏览器内打开,照样能看你源码~使用fiddler来抓包需要先做一些简单的准备工作:一台带有无线网卡的PC或者笔记本电脑,然后将电脑和手机连接到同一个Wi-Fi网络中,并且保证二者是在同一个... 阅读全文
posted @ 2015-11-18 11:40 axl234 阅读(8942) 评论(1) 推荐(0)
摘要:rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么?rem(fontsizeoftherootelement)是指 相对于根元素的字体大小... 阅读全文
posted @ 2015-11-12 15:43 axl234 阅读(1481) 评论(1) 推荐(0)
摘要:Document css样式#animationTipBox { font-family: "Microsoft Yahei","微软雅黑",Arial,Tahoma; font-size: 14px; width: 250px; height... 阅读全文
posted @ 2015-10-29 15:08 axl234 阅读(331) 评论(0) 推荐(0)
摘要:普通解决方案:android暂无方案;ios使用-webkit-text-size-adjust禁止调整字体大小body{-webkit-text-size-adjust: 100%!important;}最好的解决方案:整个页面用rem或者百分比布局如果html5页面特效多比较,建议开启硬件加速:... 阅读全文
posted @ 2015-09-06 11:31 axl234 阅读(1342) 评论(0) 推荐(0)
摘要:html5多图控件multiple 这个input的特性是html5新有的,所以IE6这么低级的货是无法兼容的。这个属性相当于以前的这样的多图情况 不过道理很简单一个是一次只能选择一个图片HTML5的这个可以选择多个图片后台代码:function getimgmany($rr,$upload_im... 阅读全文
posted @ 2015-07-02 14:31 axl234 阅读(1108) 评论(0) 推荐(0)
摘要:Zepto 只针对移动端浏览器编写,因此体积更小、效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习成本也很低。但是在开发过程中,我发现 Zepto 还远未成熟,其中包含了一些或大或小的“坑”,与 jQuery 的差距还是很明显的,所以写篇文章记录下,希望对后来者有帮助注意,本文... 阅读全文
posted @ 2015-06-02 15:50 axl234 阅读(217) 评论(0) 推荐(0)
摘要:为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个)。很多... 阅读全文
posted @ 2015-06-02 15:34 axl234 阅读(261) 评论(0) 推荐(0)
摘要:响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难。没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去,因为越来越多的设备都可以打开网站。因此,我们需要弄清楚响应式网页设计的一些基本原则,接... 阅读全文
posted @ 2015-05-21 17:35 axl234 阅读(180) 评论(0) 推荐(0)
摘要:iphone6 及 iphone 6 plus 已经出来一段时间了。很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了。大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H5页面大部分都以320px为基准宽度进行布局,那些大屏屌丝android用户也懒得去理,而现在ipho... 阅读全文
posted @ 2015-05-21 16:24 axl234 阅读(696) 评论(0) 推荐(0)
摘要:1.快速输出静态页面2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢?这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少。同时也会谈及移动端H5页面的优化细节与关键点,因此本文章将分为动效篇... 阅读全文
posted @ 2015-05-21 15:56 axl234 阅读(311) 评论(0) 推荐(0)
摘要:对于前端开发者来说移动端存在更多的挑战,移动端页面开发过程中会碰到各种各样千奇百怪的问题(我们俗称BUG或坑),那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧。 移动端页面在不同设备、不同操作系统 、不同运行环境下都可能造成各种各样的没有碰到过的的坑,相比曾经的IE6坑多了。下面先介绍... 阅读全文
posted @ 2015-03-10 14:58 axl234 阅读(524) 评论(0) 推荐(0)
摘要:下面简单介绍一下我这个游戏:基本上就3个画面(准备再添加一个胜利的界面)开始画面,一个按钮,点击进入游戏游戏画面,滚动的背景,触摸移动的老鹰,从天而降的翔,以及右上角的时间条结束画面,显示结果,关注按钮和重玩一次按钮游戏主文件:GameContainer.ts(游戏逻辑)4个类文件:GameUtil... 阅读全文
posted @ 2015-01-23 15:03 axl234 阅读(1278) 评论(0) 推荐(0)