自适应设计：如何在不同的屏幕分辨率下修改CSS网格大小？

Question

Currently I am using something like this to modify grid sizes when a browser hits a certain width (break point), for example:

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

Is there a better approach to accomplish this? One of the issues I am experiencing is a slight "hickup" after the page initially loads as I can see the grid resizing from grid_10 to grid_16? Ideally I would like to eliminate this hickup.

Answer 1

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

Answer 2

Have a look at css media queries here: http://css-tricks.com/css-media-queries/

They are fast and work on mobile phones as well.

Answer 3

There are specific grid-frameworks for Responsive Design. I prefer Susy in use with Compass: http://susy.oddbird.net and http://compass-style.org