I want to use Media Queries for Responsive Web Design. For the beginning I want to have two different CSS files if the width is higher than 900px or below 900px.
This is how I integrated the external stylesheets:
<link id="Min900" rel="stylesheet" type="text/css" href="style/Min900/schwarz.css" media="screen and (min-width: 900px)" />
<link id="Max899" rel="stylesheet" type="text/css" href="style/Max899/schwarz.css" media="screen and (max-width: 899px)" />
The funny thing is the last specified external stylesheet is loaded. If I switch the order of both, I get the other stylesheet working.
But they should change depending on the width of the browser.
My suggestion would be to combine these two style sheets into one file. You're going to introduce an extra html request doing it your way, which will slow down your site. Also, the reason the last one is loading is because they are named the same thing, so the browser is updating the css file, even though they're coming from two different paths. Try renaming one if you don't want to combine them.