0

現在、ブラウザが特定の幅（ブレークポイント）に達したときにグリッドサイズを変更するために、次のようなものを使用しています。次に例を示します。

var width = jQuery(window).width();

if (width <= 480) {

    // Resize from grid_10 to grid_16 (Home, Featured, News)
    jQuery('.featured, .featured-page, .news-page, #footer-pagination').removeClass('grid_10').addClass('grid_16');
}

これを達成するためのより良いアプローチはありますか? 私が経験している問題の 1 つは、グリッドが grid_10 から grid_16 にサイズ変更されているのを見ることができるため、ページが最初に読み込まれた後にわずかな「ヒックアップ」です。理想的には、このヒックアップを排除したいと考えています。

4

3 に答える 3

1

App.netの連中は、数日前に興味深いソリューションを公開しました。そこでは、ブレークポイントごとに異なるグリッドユニットクラスを定義し、メディアクエリを使用してそれらを切り替えています：https ：//gist.github.com/3362608

于 2012-08-26T13:34:59.603 に答える
0

ここで css メディアクエリを見てください: http://css-tricks.com/css-media-queries/

それらは高速で、携帯電話でも動作します。

于 2012-08-25T14:26:34.833 に答える
0

レスポンシブ デザインには、特定のグリッド フレームワークがあります。Compass で Susy を使用することを好みます: http://susy.oddbird.netおよびhttp://compass-style.org

于 2012-08-25T16:53:22.067 に答える