Check users resolution in css?

Question

is it possible to behave according to the user's resolution?

Answer 1

Not with CSS, no. But with JS, sure.

if (window.screen.width <= 800 && window.screen.height <= 600) {
    //do something();
}

Answer 2

css3 media queries will allow you to apply stylesheets or @media rules according to the size of the client, among other properties.

They don't fallback in non comforming browsers, so they are not ripe for general use, but if you are young it may be worth learning how it is done.

http://www.w3.org/TR/css3-mediaqueries/

To apply a style sheet to a document when displayed on a screen greater than 800 pixels wide:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" >

To apply a style sheet to a document when displayed on any device less than 400 pixels wide:

<link rel="stylesheet" media="all and (max-device-width: 400px)" >

This media query expresses rules for screen and handheld devices if the width of the viewport is greater than 20em.

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

The ‘em’ value is relative to the font size of the root element.

Answer 3

You can't check the resolution with CSS. But you can make up fluid designs.

Take a look at Little boxes for some great starters.

Grz, Kris.

Answer 4

You can't do that in standard CSS. Maybe it'll be OK in (only) IE browsers.

Or you can use JavaScript.