注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】zepto.JS与JQ的区别之获取CSS3变形效果  

2014-12-25 12:10:54|  分类: 移动端专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
欢迎学习交流---梦幻雪冰

今天在进行移动端开发时,被zepto.js坑了一把,不知道是不是zepto.js,对盒模型的渲染有问题还是怎么的,无法正确获取例如设置了scale的div的宽高。例子如下:

欢迎学习交流---梦幻雪冰

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<!-- <script src="jquery-1.8.3.min.js"></script> -->
<script src="zepto.js"></script>
</head>
<style>
.wrap {
width: 500px;
height: 600px;
}
.box {
width: 500px;
height: 300px;
background:#fcf;
}
.con {
width: 500px;
height: 300px;
background: #cfc;
-webkit-transform: scale(0.8)
}
</style>
<body>
<div class="wrap">
<div class="box"></div>
<div class="con"></div>
</div>
</body>
</html>

zepto.JS与JQ的区别之获取CSS3变形效果 - 绝版咖啡 - 绝版咖啡
 
这里显示2个宽高一样的div,但类名为con的div,我们给他设置了CSS3属性scale,这样在浏览器渲染时类名为con的div会缩放0.8倍,这个时候我们注意看其盒模型大小.
zepto.JS与JQ的区别之获取CSS3变形效果 - 绝版咖啡 - 绝版咖啡
zepto.JS与JQ的区别之获取CSS3变形效果 - 绝版咖啡 - 绝版咖啡
可以看出视乎这样不管有没设置scale,两个div的宽高是一样的,可以看出scale仅仅只是表示形式上进行了缩放,同时两个div之间的空白是实实在在存在的,故其真正的盒模型没有发生改,那么我们就分别用JQ和zepto.js获取他们的宽高。
zepto.JS与JQ的区别之获取CSS3变形效果 - 绝版咖啡 - 绝版咖啡
图一:jQuery获取
zepto.JS与JQ的区别之获取CSS3变形效果 - 绝版咖啡 - 绝版咖啡
 图二:zepto获取
图一为引用JQ的获取宽高截图,图二为zepto.js的获取宽高截图,差距太明显了,由于移动端使用JQ是不合适的,我们常用zepto.js进行开发,所以我们要注意这些小细节,不然在开发过程中会严重阻碍开发时间。

 欢迎学习交流---梦幻雪冰
本文来自厦门HTML5-3班:绝版咖啡
  评论这张
 
阅读(75)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017