随笔分类 - HTML5/CSS3
摘要：项目需求要保存手机横屏签名，需要旋转后的图片， 网上很多说 translate 为移动中心点，其实是误解（已从坑里出来） 正确理解是 改变 离屏 canvas 的原点， 业务结束后，记得恢复原点 和 旋转 我是看到这里明白了 .
阅读全文
摘要：限苹果手机，以下自测通过，安卓手机不支持 loadedmetadata <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="fi
阅读全文
摘要：drawText("Hello, World!What a nice day.",0,30,110); function drawText(t,x,y,w){ var chr = t.split(""); var temp = ""; var row = []; context.font = "20
阅读全文
摘要：sass、less和stylus的安装使用和入门实践 https://www.jianshu.com/p/1eaf366814e2 stylus 基础教程 https://blog.csdn.net/lyt_angularjs/article/details/80457099#stylus%E7%8
阅读全文
摘要：未知元素的宽高情况下 垂直居中和水平居中 第一种 flex盒布局 （推荐） /*弹性盒模型*/ /*主轴居中对齐*/ /*侧轴居中对齐*/ .ele{ display:flex; justify-content: center; align-items: center; } /*弹性盒模型*/ /*
阅读全文
摘要：封装： 自定义动画： 调用： https://www.jianshu.com/p/b19682ba87e2 less 语法 https://www.cnblogs.com/feng-wu/p/6040387.html
阅读全文
摘要：前端在做 input file 美化的时候，通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代，已有更方便的方法，点击美化按钮直接触发选择文件事件 我这ref 是VUE里的，理解为id吧，不用VUE的话，直接 id=‘inputFile’ 是一样
阅读全文
摘要：前端标准http://validator.w3.org/ 拒绝你的代码时报 把样式链接 <link ... 移到 <body>里，会报上面提醒 要想不报，把<link 还放到 <head> 里 当然非要放到 <body>里，加 property='stylesheet'
阅读全文
摘要：结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。 H5手机端： 来源： http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-
阅读全文
摘要：登录注册时，文本框输入焦点 TAB 键时，自定义下一个焦点的顺序 带有指定 tab 键顺序的链接： http://www.w3school.com.cn/tags/att_standard_tabindex.asp
阅读全文
摘要：在这个产品高体验的社会，打开响应速度是非常重要的， 以下2篇总结的很好，可参考借鉴： https://zhuanlan.zhihu.com/p/25718817 http://www.cnblogs.com/smjack/archive/2009/02/24/1396895.html
阅读全文
摘要：很有用的IcoMoon，在线制作工工具：https://icomoon.io/app/#/select/font 大神解说：如何灵活利用免费开源图标字体-IcoMoon篇http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-
阅读全文
摘要：下面直接放测试代码： index.html m.manifest test.css test.js 测试通过
阅读全文
摘要：如上图片： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>可拖拽的元素组件</title> <style> #d1 {width:800p
阅读全文
摘要：//判断浏览器是否支持H5window.onload = function() { if (window.applicationCache) { alert("你的浏览器支持HTML5"); } else { alert("你的浏览器不支持HTML5"); } }
阅读全文
摘要：对于支持HTML5浏览器有2种方法： 1. HTML5 2. CSS3 非HTML5浏览器，参考以下JS 总结参考：http://www.cnblogs.com/sheshou/p/5416885.html .
阅读全文
摘要：苹果上这个上下弹的效果对于有固定导航的页面，体验很不好 知乎上搜到一个并不是完美方案：https://www.zhihu.com/question/22256539 完美方案是有个国外插件叫：preventoverscroll.min.js 可以解决问题 最好的方案是APP本身来阻止和开启，比如钉钉
阅读全文
摘要：js或jquery 元素移动以像素计算，手机上移动效果会有卡顿 利用CSS3 可以很简单的实现流畅的移动动画 说明： translate3d(66px, 88px, 0) 表示X轴偏移66px， Y轴偏移88px rotate(45deg) 表示在此过程中旋转45° transition: tran
阅读全文
