How to handle different screen resolution/screen size when developing a site?

Question

I would like to develop a site using jQuery that will work with all major browsers. I thought to start with a basic layout (a header, a couple of tabs with content, and footer).

Answer 1

This is some simple scripting I've used in the past (using jQuery):

$(document).ready(function(){
 $('body').append('
');
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 var pageWidth = $(window).width();
 var sizeSelected = "css/blue-800.css";
 if (pageWidth > 900) { sizeSelected = "css/blue-1024.css"; }
 if (pageWidth > 1010) { sizeSelected = "css/blue-1280.css"; }
 if (pageWidth > 1420) { sizeSelected = "css/blue-1600.css"; }
 $("#screencss").html('');
}

The page width values used in the code are arbitrary and were tweaked to work with a specific site, so feel free to adjust them as desired.

Also, inside of each of those CSS files is just a minimal amount of CSS that sets the width of major containers/wrappers and even the background image.

---

Update #2: If you are trying to maintain valid HTML. Then you can add all of the CSS stylesheets into the head of your page (include a title attribute in each one):

Then use this script. You may get a flash of white if you have included background images in your CSS, so make sure to set a base CSS style.

$(document).ready(function(){
 $('body').append('
');
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 var pageWidth = $(window).width();
 var sizeSelected = "blue1";
 if (pageWidth > 510) { sizeSelected = "blue2"; }
 if (pageWidth > 580) { sizeSelected = "blue3"; }
 if (pageWidth > 900) { sizeSelected = "blue4"; }
 if (pageWidth > 1010) { sizeSelected = "blue5"; }
 if (pageWidth > 1420) { sizeSelected = "blue6"; }
 var lnk = $('head').find('link[title=' + sizeSelected + ']').removeAttr('disabled');
 $('head').find('link[title]').not(lnk).attr('disabled', 'disabled');
}