Geek Answers Handbook

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

I would like to create a site using jQuery that will work with all major browsers. I decided to start with a basic layout (header, a couple of tabs with content and a footer). I wonder how I can create this layout to support various screen resolutions, screen size, or window size. Should I work in pixels / dots / percent when determining the width and height of the components? Are there any jQuery plugins that can help me with this task? Thank!

+5
source share
4 answers

There are a number of solutions to this problem, but they mainly depend on what content you want to share through the site (for example, embedded videos or images that may have a finite size), and the look of you goes.

For web layouts that work well across multiple browsers and over a wide range of window sizes, you should look at Liquid Layouts. Below are some links to guides for these layouts.

Javascript ( jQuery) / (, , ). "Adaptive Content".

+7

, ( jQuery):

$(document).ready(function(){
 $('body').append('<div id="screencss"></div>');
 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('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />');
}

, , , .

, CSS CSS, / .

# 2: HTML. CSS ( title ):

<link title="blue1" href="blue-320.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue2" href="blue-640.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue3" href="blue-800.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue4" href="blue-1024.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue5" href="blue-1280.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue6" href="blue-1600.css" media="screen" rel="Stylesheet" type="text/css" />

script. , CSS, CSS.

$(document).ready(function(){
 $('body').append('<div id="screencss"></div>');
 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');
}
+4

jQuery . HTML CSS. Javascript jQuery, , . , . . EM .

-, grid-, 960gs, gthe , . .

, / , 600-800 . Aka 80% 1000 , 1900 , .

, . , , , .

, .

+1

, css "Grids" Yahoo (YUI), : http://developer.yahoo.com/yui/grids/.

The basic configuration of the grid package includes the header, body, and footer. You can remove the header and / or footer if you wish. The body can be split using a nested mesh model and include many patterns.

Personally, I start with all the HTML / CSS pages that I create using the combined reset-fonts-grids file from YUI. It provides you with a cross browser css reset file, a grid file and some standardized font classes.

+1
source

More articles:


All Articles