In short I have re-written the way layouts work in Adaptivetheme to support mobile, tablet and standard screens.

Adaptivetheme 7.x-2.x uses media queries combined with a more flexible approach to setting values for the sidebars, page width, max width (for responsive layouts), and you can customize the media query - all in the theme settings.

Adaptivetheme can now handle both responsive and adaptive layouts - simply use percentages to enable a responsive layout, or pixels to do adaptive. You can also use ems if you so desire - the layout engine does not care about what unit type you want to use.

You can mix and match responsive and adaptive layouts also - say you want an adaptive approach for standard screens and tablets, but a fully responsive approach for smaller screens. You can apply up to 5 independent layouts each with unique values, unit, sidebar positions (there are also 5 choices for sidebar layout), and of course enter your media query. The theme ships with each layout per-configured so you're not in the deep in strait off.

One big change from all previous versions of Adaptivetheme is that we now allow any value to be input for sidebar width, page width and max-width (max-width only applies to responsive layouts). Previous versions forced you to use per-configured column widths, such as 60px. I found this approach extremely frustrating when working with media queries and really you need absolute control over every pixel. So now if you want your page width to be 992px, you can, and that's a big win for those wanting to use their own grid and not 960 12/16.

Additionally we no longer write the layout CSS into the head - this was fine for previous versions as it was a very small amount of CSS with pretty much zero performance loss, however with media queries writing the CSS into the head has some major flaws - respond.js cannot parse it so supporting < IE8 is nearly impossible, there's more CSS and simply a lot more PHP to process on each page load and frankly I just didn't like it. The solution has been to write custom validate and submit functions that process the layout CSS and generate a small CSS file that is saved in your public files. This is really the ideal solution because we get cleaner output in our markup, we're not processing a tonne of PHP on each page load (only once when you click save on the theme settings and the file generates), and the biggest win is that respond.js can parse the file and give full support to legacy versions of IE.

As stated we're using respond.js to support IE. Respond.js is a very small script and only supports min-width and max-width, not -device-width, and its limited in other ways, however its small and very fast and only executes if required. For the vast majority of situations I think its a great solution.

I've started to update our free contrib sub-themes - both Pixture Reloaded 7.x-2.x and Corolla 7.x-2.x support the new layout engine and Corolla in particular has new styling to be fully responsive - right down to 240px width it will look great. I've attached some simple screenshots to show Corolla in various page widths - take note of the branding elements and the font sizes - we also handle the top menu in Corolla very differently in the different screen sizes but this is not shown in these shots. Note that the 7.x-2.x version of Corolla is now a sub-theme of Adaptivetheme 7.x-2.x).

Keep in mind that these screenshots are just one configuration - you can of course change this to whatever you want, just using theme settings. Of course Corolla still needs some style love - I've focused on the big picture stuff and I still need to do things like reducing margins and padding in the smaller screens, working on font sizes and so on.