Question

我目前正在使用2个CSS样式表，并为我的网站附加了媒体查询，以便针对不同的浏览器大小调整大小。我的问题是我有一个Jquery驱动的幻灯片，当我以较小的分辨率查看网站时，我需要将图像更改为更小的尺寸。我有一个包含在div中的幻灯片，它有一个jquery动画，可以扩展盒子的设置宽度，给人一种幻觉，即在里面展示需要改变以进行补偿的幻灯片。

这是我的默认Jquery，其中包含要展开的div的动画

$(document).ready(function() {
$("#slideshow_box")
    .animate({"height": "600px"}, 500)
    .animate({"width": "488px"}, 500);
});

我如何更改它以便较小的查看版本是这样但只会在以较小的分辨率查看网站时触发？

$(document).ready(function() {
$("#slideshow_box")
    .animate({"height": "400px"}, 500)
    .animate({"width": "288px"}, 500);
});

CSS

#slideshow_box{
    position:relative;
    float:left;
    height: 0px;
    width: 0px;
    margin-right: 60px;
    overflow:hidden;
}

Answer 1

使用屏幕宽度和高度。基于这些写你的代码

 $(document).ready(function(){
   if ((screen.width>=1024) && (screen.height>=768)) {

        alert('Screen size: 1024x768 or larger');

  }
  else  {
        alert('Screen size: less than 1024x768, 800x600 maybe?');

    }
});

谢谢..

Answer 2

最简单的方法可能是通过使用变量从Javascript访问当前屏幕分辨率来复制媒体选择逻辑：

screen.width
screen.height

如何更改我的Jquery幻灯片以更改不同屏幕分辨率的大小

2 个答案: