原文作者:Thijs van der Vossen 本文翻译自<How to work around the Mobile Safari image resource limit>,原文写于2010年10月25日.可能部分限制已经不再适用. 翻译本文的目的是作为<读Zepto源码之assets模块>的附文,读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 正文开始: 受限于 Ipad 和 Iphone 的可用内存,Safari 浏览器的移…

原文链接:https://zellwk.com/blog/how-to-write-mobile-first-css/ 构建响应式网站是如今前端开发者的必备技能,当我们谈到响应式网站时,“移动端优先”这个词立刻就会出现在脑海中. 我们知道从“移动端优先”这个角度开始设计很重要,但我们很少谈到使用“移动端优先”的方法来写代码. 今天,我想与你分享“移动端优先”添加样式的方法,为什么这种方法更好,以及如何发挥它的魔力. 贴士:如果你在学习使用Susy来建立响应式布局,这篇文章会对你帮助非常大. #什…

IOS3 模块是针对 IOS 的兼容模块,实现了两个常用方法的兼容,这两个方法分别是 trim 和 reduce . 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook <reading-zepto> trim if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.trim = fun…

fx 模块为利用 CSS3 的过渡和动画的属性为 Zepto 提供了动画的功能,在 fx 模块中,只做了事件和样式浏览器前缀的补全,没有做太多的兼容.对于不支持 CSS3 过渡和动画的, Zepto 的处理也相对简单,动画立即完成,马上执行回调. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook <reading-zepto> 内部方法 dasherize function das…

Stack 模块为 Zepto 添加了 addSelf 和 end 方法. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 改写原有的方法 'filter,add,not,eq,first,last,find,closest,parents,parent,children,siblings'.split(',').forEach(function(property) { var fn = $.fn…

Form 模块处理的是表单提交.表单提交包含两部分,一部分是格式化表单数据,另一部分是触发 submit 事件,提交表单. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook <reading-zepto> .serializeArray() $.fn.serializeArray = function() { var name, type, result = [], add = f…

Zepto 的 Data 模块用来获取 DOM 节点中的 data-* 属性的数据,和储存跟 DOM 相关的数据. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook <reading-zepto> 内部方法 attributeData var data = {}, dataAttr = $.fn.data, camelize = $.camelCase, exp = $.expan…

assets 模块是为解决 Safari 移动版加载图片过大过多时崩溃的问题.因为没有处理过这样的场景,所以这部分的代码解释不会太多,为了说明这个问题,我翻译了<How to work around the Mobile Safari image resource limit>这篇文章作为附文(<怎样处理 Safari 移动端对图片资源的限制>),更详细地解释了这个模块的应用场景. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版…

前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object object) 和wx.chooseImage(Object object)接口,对图片大小和来源进行上传 wx.chooseImage() 概述: 从本地相册选择图片或使用相机拍照,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/minipro…

平常我们要实现倒影的效果,一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate.这种方法的缺点是占据空间以及DOM元素过多. 在使用webkit内核的浏览器中(chrome,safari,移动端浏览器),可以使用-webkit-box-reflect属性来实现倒影,语法如下所示 [ above | below | right | left ]? <length>? <image>? 该值包涵了三部分:方位+偏移量+遮罩层 方位是必不可少的:在使用遮罩层的时候…