2

CSS@mediaクエリの使用が普及したことで、表示される解像度に基づいて Web ページのスタイルを設定できるようになりました。ブラウザ ウィンドウのサイズを変更すると、幅に依存するスタイル/レイアウトがすぐに適用されます。CSS では、これは非常に簡単です。

// The heart of "responsive design."
@media screen and (max-width: 1000px) { ... }

レスポンシブ デザインの精神で、解像度の変更時に JavaScript ロジックをオンザフライで調整できますか? たとえば、10 秒ごとに「5」という数値を出力するスクリプトがある場合、ブラウザ ウィンドウのサイズが 300px 未満に変更されたときに、(同じ間隔で)「7」を出力するようにスクリプトを変更できますか?

// Default script
setTimeout(function() {
  var i = 5;
  console.log(i);
}, 10000);

// How to change the value of i to 7, upon window resize?
// Ideally, without a page reload.
4

3 に答える 3

3

window.resizeイベントを処理します。

window.onresize = function () {
    // check if the new height/width is <300
    // change your i variable
};

これが機能するためには、i変数は、サイズ変更ハンドラーと setTimeout に渡す匿名によって共有されるスコープ内にある必要があります。

ウィンドウの高さ/幅を取得するための答え。

于 2012-08-06T14:50:37.737 に答える
0

10 秒ごとに ( with に基づいて) 数値を表示する場合、コードは次のようになります。

setInterval(function() {
    var num = (window.outerWidth <= 300) ? 7 : 5;
    console.log(i);
}, 10000);

@jbabeyが答えたように、ウィンドウのサイズが変更されたときに番号を表示したい場合は、window.reseizeイベントを処理する必要があります。

于 2012-08-06T14:53:57.400 に答える
0

CSS と JS の間で変数を正確に渡すことはできませんが、Javascript はresizeイベントを公開し、window.

例えば：

function (event) {
  if (event.srcElement.outerWidth <= 1000 ){
    // do something
  }
}

ワーキング JSFiddle デモ

于 2012-08-06T14:47:43.243 に答える