2

サイトにスライダーを含む大きなバナーがあります。位置は ですabsolute。小さい画面で見るとバナーが非常に広いため、左側しか見えません。

私はもともとmedia screen onlyモバイルやさまざまな画面サイズに合わせて調整するために使用していましたが、基本的にサイズごとに異なる左負の位置を適用しますが、これは非効率的であり、可能なすべてのサイズを考慮する必要があるため、完全には機能しないようですきちんとすること。

それから私はjavascriptについて考えましたが、残念ながら私はそれについてあまり知りません。画面サイズに基づいて左側の位置を自動的に変更するjsのdivに適用できる簡単なコードがあるのではないかと思っています。

または、に基づく提案でさえ、media screen only感謝します。それに関する私の大きな問題は、どの解像度にどの左の位置を適用する必要があるのか​​ わからないことです。

さらに情報が必要な場合はお知らせください。ありがとうエイドリアン

4

2 に答える 2

1

私は少し前にいくつかの有用なスニペットを含む記事を書きました。これはそのうちの 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

方法 1

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

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

方法 2

#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 に答える