JavaScript 媒体查询

Question

我正在尝试使用媒体查询来减小小屏幕的立方体大小。 我在 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
        });

 });

Answer 1

可能是因为您正在使用 location.reload()，这将刷新页面并且不会运行任何后续代码？

<小时/>

您还在resize处理程序的外部进行检查，因此您只需根据窗口的原始大小绑定(bind)适当的处理程序。 (实际上，如果窗口小于 600，您将绑定(bind)两个处理程序，并且它们都会运行!)您可能希望在处理程序中使用 if。 p>

仅供引用，这不是“媒体查询”；这些是一个特定的新功能，具有从 CSS 移植的特定语法。 screen 是一个古老的 DOM0 事物。

另外，我必须说无休止旋转的立方体非常烦人。