conditional statement for screen resolution?

Question

I would like to use a conditional statement to attach a different stylesheet for:

if the clients resolution is <= 1024*768

I'm pretty sure this is possible, but have never seen the code for it before?

ps. I am not looking for a javascript solution

Answer 1

Typically people don't "attach another stylesheet" for screen resolution because you could resize the browser after page load, changing the resolution, and you don't want file loading every time you do.

This will do the trick, in one CSS file:

Ex:

/* css as usual */
.this-class { font-size: 12px; }

/* condition for screen size minimum of 500px */
@media (min-width:500px) {

  /* your conditional / responsive CSS inside this condition */

  .this-class { font-size: 20px; }

}

This should change the font size to 20px when the @media query condition is true, in this case when the screen is over 500px.

As you size your browser up and down you will see the conditional CSS rules take effect automatically, no JS needed.