我的网站上有一个包含 slider 的大横幅,位置是absolute
,因为当我在较小的屏幕上看横幅时它太宽了,你只能看到左边它的侧面。
我最初使用 media screen only
来调整移动设备和各种屏幕尺寸,我基本上会为每种尺寸应用不同的左负左位置,但这似乎效率低下而且似乎不起作用完美,因为我需要考虑所有可能的尺寸以使其整洁。
然后我想到了 javascript,但不幸的是我对它了解不多。我想知道是否有一段简单的代码可以应用于 js 中的 div,它会根据屏幕尺寸自动更改其左侧位置。
或者任何基于media screen only
的建议都将非常感谢。我的大问题是不知道我应该将哪个左位应用于哪个决议。
如果您需要更多信息,请告诉我。谢谢 阿德里安
最佳答案
我写了an article前一段时间有一些有用的片段,这是其中之一:
This utility is a simple approach to set width breakpoints when working on responsive designs. It's a quick way to relate CSS media queries in your JavaScript code as you go.
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
}
关于javascript - 媒体查询与 javascript 用于根据屏幕尺寸更改 div 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13258799/