CSS3 Arithmetic

Question

I have been using and learning CSS3 a fair bit of late and enjoying its many capabilities. Right now I am wondering if it is possible to setup a CSS rule that assigns a block element width conditionally. The sort of thing I am after - if the screenwidth is less than, say 500px, use a width of 320px otherwise use a width of, say, 80%, of screen size.

Yes, I realize I could do this sort of thing through JavaScript - just wondering if there isn't a more elegant CSS3 approach.

Answer 1

Yes, it is very much possible using CSS media queries - http://www.css3.info/preview/media-queries/

.mydiv {
    width: 80%; /* normal case */    
}

/* special case if screen width < 500 */
@media all and (max-width: 500px) {
    .mydiv {
        width: 320px;
    }
}

Answer 2

@media only screen and (max-width: 500px) {
    // CSS rules go here
}

@media only screen and (min-width: 501px) and (max-width: 959px) {
    // CSS rules go here
}

@media only screen and (min-width: 960px) {
    // CSS rules go here
}

etc...

From the W3C