jQuery当缩放改变css功能答案

【问题标题】：jQuery when zoom change css functionjQuery当缩放改变css功能
【发布时间】：2015-08-24 07:09:59
【问题描述】：

我使用top: x 将项目与屏幕中心对齐。

示例：

div {
   top: 50%;
}

我想要一个屏幕尺寸缩小时的脚本，将top: 50% 的大小调整一定百分比，例如0.2。

示例：

如果屏幕尺寸为 1920 x 1080 top: 50%; 如果缩放或更换较小的设备且屏幕尺寸为 320 x 480 top: 45%;

每次屏幕变小然后 1920 x 1080 顶部得到一个值 - 0.01%

更新

我使用 fittext.js，现在它可以在任何屏幕分辨率的每台设备上正常工作。这是一个非常有用的插件。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果你想做一个js解决方案

你必须做一些链接这个

$(window).resize(function() {
   $('#content').css("top", $(window).width() + somevar ); 
   //plus or minus something according to your requirments
});

$(window).trigger('resize');

【讨论】：

【解决方案2】：

可以通过媒体查询来完成

@media only screen and (max-width: 1920px) {
  div {
   top: 50%;
  }
}

@media only screen and (max-width: 320px) {
  div {
   top: 45%;
  }
}

确保您在head 中添加了以下内容以支持媒体查询

<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />

【讨论】：

优雅的答案，但我不得不不同意元标记 - 唯一需要的是视口，其他显然是不需要的遗留/专有标签 - 更多：stackoverflow.com/questions/1988499/…跨度>

【解决方案3】：

如前所述，要回答您的问题，您可以将一个事件绑定到 window.onresize，它可以测试窗口的宽度或高度，并在达到特定阈值时更新元素的 CSS。

但是，很多更好的解决方案是以不需要调整的方式将其居中 - 更不用说不应该使用 javascript 来修复显示问题。

当您知道元素的高度时，一个很好的方法是使用 top:50% 和元素高度一半的负数 margin-top。

还有其他方法，例如查看this question here on SO 的答案，或查看centering in css article 的 CSS 技巧。

【讨论】：