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

有没有更好的方法来实现这一目标？我遇到的一个问题是在页面初始加载后出现轻微的“hickup”，因为我可以看到网格从grid_10调整为grid_16？理想情况下，我想消除这种恐慌。

Answer 1

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

Answer 2

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

他们很快，也可以在手机上工作。

Answer 3

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

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

3 个答案: