Question

Just for tests and learning css3 i am trying to create small mobile website. But for now I have small problem with targeting stylesheets. I’m doing it in such way:

<link rel="stylesheet" media="only screen and (max-width: 180px)" href="xsmall.css" />
<link rel="stylesheet" media="only screen and (min-width: 240px)" href="small.css" />
<link rel="stylesheet" media="only screen and (min-width: 320px)" href="medium.css" />
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="large.css" />
<link rel="stylesheet" media="only screen and (min-width: 540px)" href="wide.css" />

Unfortunatelly after changing xsmall.css change is visible also in other web versions ( so for 480px, 540 px etc ). I test websites (mobile one) on Opera Mobile Emulator. What I’m doing wrong?

thanks

Answer 1

What you are doing wrong is to think that your stylesheet selection includes only one of the style sheets.

A style sheet that you include with min-width will be included for any resolution that is larger, so if I for example have a 600px wide screen, I will get small.css, medium.css, large.css and wide.css, not only wide.css.

(Also, if I have a 200px wide screen, it would not include any style sheet at all…)

You would need to use both min-width and max-width to make it only include one of the style sheets.