JavaScript媒体查询

JavaScript media queries

本文关键字：查询 媒体 JavaScript      更新时间：2023-09-26

我正在尝试使用媒体查询来减少小屏幕的立方体大小。我在js中给出了媒体查询，因为我的立方体大小是在js中设置的，但是当我减少浏览器窗口时，我的立方体大小并没有减少。你能告诉我为什么不行吗?

http://jsfiddle.net/rajkumart08/8YK2n/embedded/result/

$(window).bind('resize', function() { location.reload();
     Gallery.setOptions({
            size: 78,
            lightbox: false,
            //animation:  'drop'
            //speed:      500,
            //closeOnEsc: true,
            //slideshow:  false,
            //slideshow_speed: 3000,
            //cube_speed: 1000
        });
 });
if (screen.width < 600) {
     $(window).bind('resize', function() { location.reload();
     Gallery.setOptions({
            size: 25,
            lightbox: false,
            //animation:  'drop'
            //speed:      500,
            //closeOnEsc: true,
            //slideshow:  false,
            //slideshow_speed: 3000,
            //cube_speed: 1000
        });
 });

可能是因为您使用的是location.reload()，它将刷新页面而不运行任何后续代码?

您还在resize处理程序的之外执行检查，因此您仅根据窗口的原始大小绑定适当的处理程序。(实际上，如果窗口小于600，您将绑定两个处理程序，它们将同时运行!)你可能想把if放在你的处理程序中。

仅供参考，这不是一个"媒体查询";它们是一个特定的新特性，具有从CSS移植来的特定语法。screen是一个古老的DOM0的东西。

我还得说这个不停旋转的立方体很烦人

相关文章：