2016 Technology
rem 62.5%在chrome谷歌和其他浏览器不一样
http://www.5imoban.net/jiaocheng/div+css/201512191529.html
http://blog.csdn.net/phunxm/article/details/42174937/
淘宝弹性布局方案lib-flexible实践 http://www.cnblogs.com/lyzg/p/5058356.html
手机淘宝的flexible设计与实现 http://www.html-js.com/article/2402
从网易与淘宝的font-size思考前端设计稿与工作流 http://www.cnblogs.com/lyzg/p/4877277.html
JQurey各种版本:http://www.jq22.com/jquery-info122
web app变革之rem http://isux.tencent.com/web-app-rem.html
http://www.responsive.cn/
Case:http://www.eecc.com.cn/
布局自适应
自适应,包括基于媒体查询的px布局,百分比布局,rem布局。
其中手机淘宝的rem布局方案,很有实践价值。
http://www.html-js.com/article/2402
触摸手势
业内成熟方案有
百度的touch.js
http://touch.code.baidu.com/
以及国外的hammer.js
http://hammerjs.github.io/
轮播图
用过bug最少的就是iSlider了
http://be-fe.github.io/iSlider/
局部滚动和下拉刷新
淘宝的xscroll和国外的iscroll
单页面(基于状态的路由)
张鑫旭有一个mobilebone.js
http://www.mobilebone.org/
又一个单页滚屏组件:pageSwitch.js http://www.qiqiboy.com/post/65
学习16:css3 flex流动自适应响应式布局设计 http://qianduanblog.com/post/css-learning-16-css3-flex-responsive-design.html
学习18:css3 flex流动自适应响应式布局实例 http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html
http://qianduanblog.com/post/css-learning-19-css3-flex-responsive-design-class.html
iScroll官方 http://cubiq.org/iscroll-4 http://cubiq.org/dropbox/iscroll4/examples/simple/
iScroll.js的用法 http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html
iScroll.js 用法参考 (share) http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html
http://blog.csdn.net/albert528108/article/details/41803011
iscroll.js结合appcan实现上拉加载下拉刷新的效果
http://blog.sina.com.cn/s/blog_a0d0fbbd0102uydu.html http://blog.sina.com.cn/s/blog_a5d3b8fd0102vgq1.html
使用iScroll时,input等不能输入内容的解决方法 http://www.cnblogs.com/duanhuajian/archive/2012/11/09/2763159.html
移动端rem自适应布局关键代码
function
resi() {
var
html = document.querySelector(
"html"
);
var
wW = document.body.clientWidth || document.documentElement.clientWidth;
var
maxW = 640;
var
minW = 320;
if
(wW > maxW) wW = maxW;
var
ratio = wW / minW;
html.style.fontSize = 50 * ratio +
"px"
}
window.addEventListener(
"DOMContentLoaded"
,
function
() {
var
bodys = document.querySelector(
"body"
).style;
bodys.opacity =
"1"
;
bodys.filter =
"alpha(opacity=100)"
;
resi()
});
window.addEventListener(
"resize"
, resi);
基础http://blog.csdn.net/kongjiea/article/details/17092413
jQuery Ajax 实例 ($.ajax、$.post、$.get) http://jun1986.iteye.com/blog/1399242
HTML5实战——svg学习 http://www.cnblogs.com/duanhuajian/p/3227410.html
jquery函数大全 https://www.douban.com/note/218884397/
CSS print 样式 http://www.admin10000.com/document/5933.html(不支持低版本IE)
jquery.printPage.js,将想要打印的页面加载到iframe中,并打印它http://www.css88.com/archives/3014
http://blog.jobbole.com/44662/ CSS控制print打印样式 http://blog.csdn.net/pangni/article/details/6224533
百度判断客户端是手机还是PC的方法 http://yuncode.net/code/c_57635d576b37762
腾讯isux:使用SVG中的Symbol元素制作Iconhttp://isux.tencent.com/16292.html
上哪找svg图标去呢? 这里推荐去icomoon.io 这个专门提供矢量图标网站下载矢量图像,重要的是它提供SVG格式的图形下载。
Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库(snap.svg-min.js)
SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看、与分辨率无关的矢量图形。而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操作 DOM 一样操作 SVG 资源。
Snap.svg 是专为现代浏览器打造,支持剪裁,遮罩,纹理,渐变,分组等功能。凭借丰富的动画库和易于的事件处理,Snap.svg 可以帮助你轻松实现 SVG 功能。
国外Snap.svg:http://snapsvg.io/demos/
国内Snap.svg:http://www.zhangxinxu.com/wordpress/2014/02/snap-svg-fishing-css3/
其他http://www.jq22.com/demo/AnimatedSVGIcons-master-141127215600/ (下载http://www.jq22.com/jquery-info1085)
突袭HTML5之SVG 2D入门2 - 图形绘制 http://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html