I recently discovered the greatness that is adapt.js, or Adaptive CSS.  In a nutshell, it's a javascript tool that allows your website to activate different CSS files based on the user's current browser window size.  

When you first start using it you may notice that static elements like a page's header background and other large elements that wouldn't fit on a mobile screen don't work very well.  If you probe a little more, you realize that you can completely customize all of this in a new CSS file meant for a mobile user.

The nice thing about Adaptive is that it scales both ways.  You'll be able to implement layouts for full widescreen if you desire.  Here's what the range portion of Adaptive looks like when it's installed on a page (available in their example):

range: [
    '0px    to 760px  = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1940px = 1560.min.css',
    '1940px to 2540px = 1920.min.css',
    '2540px           = 2520.min.css'
  ]

This means that the CSS files used here will be given priority over any base stylesheets present on the page.  Here's an example of a layout using Adaptive CSS with the 960 grid system.  The first shot is at full widescreen and the second is what a typical tablet would see.

Adaptive CSS at full widescreen

Adaptive CSS at tablet size

Both of these examples are the same page.  One disadvantage is in hiding content on smaller resolutions.  The only way I can see around it is to add a display: none to the CSS block containing that content in one of the lower resolution CSS files.  However, that content will still be loaded in the background.  This is not ideal in a mobile scenario where connections are slower.