Currently, I'm setting width and height of some elements with jQuery in window resize event, based on window.innerWidth and window.innerHeight.

Something like this:

$(".gr1").css("height", (window.innerHeight - 150) + "px");

And these are some other examples:

$(".gr2").css("width", ((window.innerWidth / 2) - 12).toString() + "px");
$(".box1").css("height", ((window.innerHeight - 150) / 3 - 12).toString() + "px");
$(".box2").css("height", ((window.innerHeight - 150) / 2 - 12).toString() + "px");

And this is rendering a little slow in Chrome 21 (Windows) and renders too slow in iPad and Nexus 7 tablet. (Since there are many elements with gr1, gr2, box1 and box2 classes)

Can I do this in Pure CSS to give better performance? How?

Currently, I'm setting width and height of some elements with jQuery in window resize event, based on window.innerWidth and window.innerHeight.

Something like this:

$(".gr1").css("height", (window.innerHeight - 150) + "px");

And these are some other examples:

$(".gr2").css("width", ((window.innerWidth / 2) - 12).toString() + "px");
$(".box1").css("height", ((window.innerHeight - 150) / 3 - 12).toString() + "px");
$(".box2").css("height", ((window.innerHeight - 150) / 2 - 12).toString() + "px");

And this is rendering a little slow in Chrome 21 (Windows) and renders too slow in iPad and Nexus 7 tablet. (Since there are many elements with gr1, gr2, box1 and box2 classes)

Can I do this in Pure CSS to give better performance? How?

• javascript
• jquery
• css

• Please show us your DOM. Are the elements unique, which styles do they already have? – Bergi Commented Sep 3, 2012 at 12:50
• @Bergi My DOM is messy, also it has many other things. Anyway, I'll post a link to it in a few minutes. But, Why you need DOM? – Mahdi Ghiasi Commented Sep 3, 2012 at 12:51
• Why would a mechanic need a car to see what's wrong with it? "My car has a problem, here's a description of it, now fix it!" – Kyle Commented Sep 3, 2012 at 12:54
• @MahdiGhiasi: There is no layout with nothing to display. What are these elements you want to resize, where are they in your page? Only their contents is irrelevant – Bergi Commented Sep 3, 2012 at 12:54
• Maybe if you would optimized your selectors the performance would be satysfactory. This may be possible - but depends on your DOM and/or usecase. – WTK Commented Sep 3, 2012 at 12:54

4 Answers 4

Without seeing your HTML or CSS I can't give you a definitive answer, but the best solution if you need the elements of your page to react to the browser window being resized is to use % widths, bined with min-width and max-width to set concrete size limits.

you could try to cache your jQuery selectors, improve performance:

var gr1 = $('.gr1');
var gr2 = $('.gr2');
var box1 = $('.box1');
var box2 = $('.box2');
$(gr1).css("height", (window.innerHeight - 150) + "px");
$(gr2).css("width", ((window.innerWidth / 2) - 12).toString() + "px");
$(box1).css("height", ((window.innerHeight - 150) / 3 - 12).toString() + "px");
$(box2).css("height", ((window.innerHeight - 150) / 2 - 12).toString() + "px");

You could try using calc(), but the support is not very good (limited to IE9+, FF4+, Safari 6, Chrome 19+ & Firefox for Android).

Test: http://dabblet./gist/3609183

Media Queries Would possibly be the way to go, though it depends on your definition of "Pure" CSS, as media queries are new to CSS3, and don't work fully in IE 6/7/8.

If you don't know, they work by only applying certain styling based upon the screen/devices current resolution. You can see an example, resize the window and see how the content changes?

This is referred to as responsive web design