jquery - 响应式设计：如何在不同的屏幕分辨率下修改 css 网格大小？

Question

目前，当浏览器达到某个宽度（断点）时，我正在使用类似的东西来修改网格大小，例如：

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');
}

有没有更好的方法来实现这一点？我遇到的问题之一是页面最初加载后轻微的“打嗝”，因为我可以看到网格从 grid_10 调整为 grid_16？理想情况下，我想消除这种打嗝。

Answer 1

App.net 的家伙几天前发布了一个有趣的解决方案，他们为不同的断点定义了不同的网格单元类，并使用媒体查询在它们之间切换：https ://gist.github.com/3362608

Answer 2

响应式设计有特定的网格框架。我更喜欢 Susy 与 Compass 一起使用：http://susy.oddbird.net和http://compass-style.org

Answer 3

在这里查看 css 媒体查询：http: //css-tricks.com/css-media-queries/

它们速度很快，也可以在手机上工作。