1

ワイド、ノーマル、ナローの幅をサポートするレスポンシブ デザインで、一部の JavaScript コードをバイパスする必要があります。「ワイド」モードのときにコードをバイパスする必要があります。私は次のように書くことができます：

if ($('#page').width() < 1237) {
   ... do the animation stuff
}

ピクセル幅のハードコーディングを回避するより良い方法はありますか?

ウィンドウのサイズが変更されたときに body 要素にクラスを適用できると考えていました...次のようなもの:

if (width >= 1237) {
    $('body').removeClass('layout-normal').removeClass('layout-ipad').addClass('layout-wide');
}
else if (width >= 980) {
    $('body').removeClass('layout-wide').removeClass('layout-ipad').addClass('layout-normal');
}
else {
    $('body').removeClass('layout-wide').removeClass('layout-normal').addClass('layout-ipad');
}

これにより、ハードコーディングされた幅を 1 つの関数に分離することができ、次のように書くことができます。

   if (!$('#page').hasClass('layout-wide') {
       ... do the animation stuff
    }

しかし、ピクセル幅のハードコーディングを完全に回避する方法はありますか?

4

3 に答える 3

0

これが私が思いついたものです... 私の方法は、サポートされている各レイアウト幅に固有のクラスを body 要素に適用することです。メディア クエリが存在する場合にのみこれらのクラスを適用したいので、まずブラウザーがそれらをサポートしているかどうかを確認します。それについて議論しているスレッドは次のとおりです。

jquery を使用して CSS3 メディア クエリのサポートを検出する簡単な方法が必要です

残念ながら、このソリューションでは、サポートされている幅をハードコーディングする必要がありました。これを行うためのより良い方法がある場合は、お気軽に投稿してください。今のところ、これは迅速な結果を得るための小さなトレードオフです。

CSSは次のとおりです。

/* Add to your main CSS file - used to test for media query support */
@media all and (min-width:1px) {
    .mediatest {position:absolute}
}

JavaScript は次のとおりです。

var $globals = {
    mediaQuerySupport: false
};

function initMediaQueries () {
    // tests for media query support and if it exists, it applies classes to the body element on window resize
    $globals.mediaQuerySupport = false;

    /*
    test if the browser knows about media queries
    create a div, apply the test class, test to see if the computed style is absolute... then delete the div
    */
    var d = document.createElement('div');
    d.className = "mediatest"; // found in main css file
    document.body.appendChild(d);
    if( window.getComputedStyle && window.getComputedStyle(d).position == "absolute") {
        $globals.mediaQuerySupport = true;
    }
    document.body.removeChild(d);

    if ($globals.mediaQuerySupport) {
        // apply a class to the body element now and when window resizes
        setBodyLayout ();
        $(window).resize(function () {
            setBodyLayout();
        });
    }
} // initMediaQueries ()

function mediaQueriesEnabled () {
    return ($globals.mediaQuerySupport);
}

function setBodyLayout () {
    // hard-coded widths for the supported media query layouts - change to your needs
    var width = $(window).width();
    if (width >= 1237) {
        $('body').removeClass('layout-normal').removeClass('layout-ipad').addClass('layout-wide');
    }
    else if (width >= 980) {
        $('body').removeClass('layout-wide').removeClass('layout-ipad').addClass('layout-normal');
    }
    else { // if narrower than 980, its the most narrow width
        $('body').removeClass('layout-wide').removeClass('layout-normal').addClass('layout-ipad');
    }
}
于 2012-12-02T19:20:00.570 に答える
0

しかし、ピクセル幅のハードコーディングを完全に回避する方法はありますか?

メディアクエリはこれを行うための最良の方法です

@media (max-width:767px) {
  .class{}
}
于 2012-12-01T17:59:32.570 に答える