Tags

, , , ,

I started designing a website whose background is a complete image but while testing on different screen resolution, I found that for some bigger resolution screens my image is too small . Hence started trying my hand on various things and reading different stuff. Ultimately came up with the javascript which will easily do the magic.

function define_css(css_file){
css_link_element = document.createElement('link')
css_link_element.setAttribute("rel", "stylesheet")
css_link_element.setAttribute("type", "text/css")
css_link_element.setAttribute("href", css_file)
document.getElementsByTagName("head")[0].appendChild(css_link_element)
}
//resolution range less than 800 pixels wide in this case
if(screen.width '800' && screen.width '1024' && screen.width < '1600'){
define_css('res_1280x1024.css')
}else{
define_css('res_1280x1024.css')
}

Put this code in your head section of the page and you are ready to define your page based on different stylesheets.

Advertisements