[英]media queries vs javascript for changing div position based on screen size
我的网站上有一个很大的横幅广告,其中包含一个滑块,位置是absolute
,因为当我在较小的屏幕上查看时,横幅广告是如此宽,因此您只能看到它的左侧。
我最初使用media screen only
为了适应移动设备和各种屏幕尺寸,基本上我会为每种尺寸应用不同的左负左位置,但这似乎效率不高,而且由于我需要考虑所有可能的因素,所以它似乎也不起作用大小要整齐。
然后我想到了javascript,但不幸的是我一点都不了解。 我想知道是否有一些简单的代码可以应用于js中的div,它可以根据屏幕尺寸自动更改其左侧位置。
甚至任何基于media screen only
建议都将非常感谢。 我的主要问题是不知道我应该对哪种分辨率应用左位置。
如果您需要更多信息,请告诉我。 谢谢阿德里安
不久前,我写了一篇文章 ,其中包含一些有用的代码片段:
该实用程序是在响应式设计中设置宽度断点的简单方法。 这是在您的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
}
我不确定为什么需要绝对定位横幅,但是假设您需要,如果横幅是图像并且可调整大小 ,则可以使用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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.