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

我在我的网站上有一个很大的横幅，其中包含一个滑块，位置是

绝对的

，因为当我在较小的屏幕上看到它时，横幅太宽了，你只能看到它的左侧

我最初只使用

媒体屏幕

来调整手机屏幕和各种屏幕尺寸，我基本上会为每个尺寸应用不同的左-负-左位置，但这似乎效率低下，而且似乎无法正常工作，因为我需要考虑到每种可能的尺寸，以使其整洁

然后我想到了javascript，但不幸的是我对它知之甚少。我想知道是否有一个简单的代码，我可以应用到js中的一个div，它可以根据屏幕大小自动改变其左侧位置

甚至任何仅基于

媒体屏幕的建议都将非常感谢。我最大的问题是不知道我应该采取什么样的立场来解决问题

如果你需要更多信息，请告诉我。非常感谢。
Adrian
我不久前写了一些有用的片段，这是其中之一：

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

我不知道为什么您需要绝对定位横幅，但假设您需要，如果横幅是图像且可调整大小，您可以使用
方法1

如果必须保持原始的像素完美尺寸，请使用
方法2
将其置于屏幕中央

方法1
方法2
“每种尺寸都有不同的定位”-你到底尝试了什么，你的定位有那么复杂吗？相对值（以百分比为单位）应该可以，因为这非常有用，只是想知道在
if
语句中应用了什么？这是让它与
媒体查询相关的关键部分吗
，我看了你的演示，它似乎没有任何必要。Cheers
isBreakPoint
只返回
true
或
false
，因此你可以在任何时候任何地方使用它作为条件，就像在演示中一样。例如：
alert（isBreakPoint（320）？“是320还是更少？”：“是320以上”）
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
}

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

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

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