2

我的网站上有一个包含滑块的大横幅，位置absolute为

我最初是media screen only用来调整移动设备和各种屏幕尺寸的，我基本上会为每个尺寸应用不同的左负左位置，但这似乎效率低下，而且它似乎并不完美，因为我需要考虑到它的所有可能尺寸要整洁。

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

甚至任何基于此的建议media screen only都会非常感谢。我最大的问题是不知道我应该将哪个左侧位置应用于什么分辨率。

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

4

2 回答 2

1

不久前我写了一篇文章，其中包含一些有用的片段，这是其中之一：

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

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
}
于 2012-11-06T20:40:29.210 回答
0

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

如果它必须是原始像素完美尺寸，请使用method 2它在屏幕中居中。

方法一

#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;
}
于 2012-11-06T21:19:48.107 回答