当前位置：文江博客话题详情

如何检测缩放级别的变化？

发布于 2024-12-07 19:52:16 字数 205 浏览 0 评论 0原文

在 Chrome 或 Safari 上打开此页面，然后调整缩放级别。当您更改缩放级别时，您会注意到其元素上有可爱的缓动效果。

显然这仅适用于 Chrome 和 Safari（webkit？），但是这是如何完成的呢？有没有跨浏览器的方法来做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九命猫 2024-12-14 19:52:16

我想通了。不涉及JavaScript，它是纯CSS。

即webkit的-webkit-transition属性：

/* css */
.box {
   background: #5599ff; text-align: center;
   line-height: 80px; height: 80px; width: 100px;
   font-family: arial, helvetica; color: #FFF; 
   -webkit-border-radius:3px; margin: 10px }

.trans {
    -webkit-transition:all .218s; }

<!-- html -->
<div class="box"> STIFF </div>
<div class="box trans"> FLUID </div>

编辑：经过进一步研究，我发现大多数浏览器（即：除 IE 之外的所有浏览器）都支持供应商特定的 transition CSS 属性。但是，只有 webkit 浏览器在调整页面大小时才使用过渡。

请参阅 jsfiddle 上的演示

I figured it out. JavaScript is not involved, it's pure CSS.

Namely, webkit's -webkit-transition property:

/* css */
.box {
   background: #5599ff; text-align: center;
   line-height: 80px; height: 80px; width: 100px;
   font-family: arial, helvetica; color: #FFF; 
   -webkit-border-radius:3px; margin: 10px }

.trans {
    -webkit-transition:all .218s; }

<!-- html -->
<div class="box"> STIFF </div>
<div class="box trans"> FLUID </div>

EDIT: Upon further research, I found out most browsers (ie: everything but IE) support a vendor specific transition CSS property. However, only webkit browsers use transitions when the page is resized.