媒体查询与javascript根据屏幕大小更改div位置

时间:2012-11-06 20:24:40

标签: javascript css mobile screen

我有一个大横幅,其中包含我网站上的滑块,位置为absolute,因为当我在较小的屏幕上看到横幅时横幅太宽,所有你能看到的就是它的左侧

我最初使用media screen only来调整移动设备和各种屏幕尺寸,我基本上会为每个尺寸应用不同的左左负位置,但这似乎效率低下,而且它似乎并不像我需要的那样工作完美考虑到每个可能的大小,使其整洁。

然后我想到了javascript,但不幸的是我完全不了解它。我想知道是否有一些简单的代码可以应用于js中的div,它会根据屏幕大小自动改变其左侧位置。

甚至基于media screen only的任何建议都会非常感谢。我最大的问题是不知道我应该采用什么样的解决方案。

如果您需要更多信息,请告诉我们。谢谢 阿德里安

2 个答案:

答案 0 :(得分:1)

前一段时间我用一些有用的片段写了an article,这是其中之一:

  

此实用程序是一种设置宽度断点的简单方法   致力于响应式设计。这是关联CSS媒体的快捷方式   您可以在JavaScript代码中查询。

function isBreakPoint(bp) {
  // The breakpoints that you set in your css
  var bps = [320, 480, 768, 1024];
  var w = $(window).width(); // or window.innerWidth with plain JS
  var min, max;
  for (var i = 0, l = bps.length; i < l; i++) {
    if (bps[i] === bp) {
      min = bps[i-1] || 0;
      max = bps[i];
      break;
    }
  }
  return w > min && w <= max;
}

然后在你的剧本中:

if ( isBreakPoint(320) ) { 
  // breakpoint at 320 or less
}
if ( isBreakPoint(480) ) { 
  // breakpoint between 320 and 480
}

答案 1 :(得分:0)

我不确定为什么你需要绝对定位横幅,但假设你需要,如果横幅是图像并且可以调整大小,你可以使用method 1

如果 处于原始像素完美尺寸,请使用method 2将其置于屏幕中心。

方法1

#banner {
/* Your normal banner code */
position: absolute;
/* positioning etc. */
}

@media (max-width: {banner-size}px) {
#banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
}

方法2

#banner {
    position: absolute;
    top: 20px; /* anything you want */
    left: 50%; /* you can adjust to off-center */
    margin-left: -{width/2}px;
}