基于媒体查询和视口大小运行 Jquery 函数答案

【问题标题】：Running Jquery Functions based on media Queries and Viewport Size基于媒体查询和视口大小运行 Jquery 函数
【发布时间】：2012-11-18 08:52:50
【问题描述】：

我有一个在我的网站上完美运行的 jquery 函数，它隐藏和显示一个隐藏的潜水，其中包含一个内联块列表。

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.noConflict();
jQuery('#mdiv').click(function(){jQuery('#subNav').slideToggle(1000)});
jQuery("#subNav").mouseleave(function () {jQuery('#subNav').slideToggle(1000)});
});
</script>

现在我正在尝试使用媒体查询为智能手机创建响应式网页和响应式 CSS 导航。我想做的是继续在桌面等常规视口屏幕上启用 jquery，而不是在响应式上向 ol 添加 4 个新 li智能手机大小。这是我的响应式导航代码

enter code here
@media only screen and (min-width: 0px) and (max-width: 479px) {
#nav .current{background:#666; -moz-border-radius: 5px; -webkit-border-radius: 5px;  border-radius: 5px; background:none; }
#nav { margin: -20 2% 0 0; padding: 0; }
#nav li { margin: 0; display: block; float: left; width: 100%; clear: none; background:none; }
#nav a { width:150px; margin-top: 5px; padding: 6px 0 8px; text-indent: 10px; color: #fff; background: rgba(194,100,40,0.75) url(images/bg_arrow_white.png) 96% 50% no-repeat; border-top: 1px solid rgb(194,100,40); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#nav a:hover { border-bottom: none; }
}

您能帮我找出如何根据视口大小运行两个 jquery 函数吗？

谢谢

【问题讨论】：

标签： jquery css responsive-design media-queries

【解决方案1】：

这可能不是您想要的功能，但您可以尝试一下：http://jsfiddle.net/XvzD7/1/

通过将匿名回调绑定到窗口resize 事件触发器，您可以在窗口宽度变得小于或大于所需量时执行代码。在上面的示例中，我只是记录了#container div 的background-color。

有关更多信息，您可以查看本文的“Javascript 配对”部分：http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

如果我的答案提供的问题多于答案，请告诉我。希望这会有所帮助！

【讨论】：