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

posted @ 2016-06-14 10:56  無雄  阅读(223)  评论(0编辑  收藏  举报