[英]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.