How to have a different css depending on the user screen resolution Example . a user with 800 * 600 resolution should view a css file 1.css a user with 1024 * 800 resolution should view a css file 2.csss i guess there should be some if and else statements ..not sure exactly what to do ...can anyone help me out with it Thanks in Advance
That's a Bad Idea®. There is no way to do that without client side scripting, and there's no guarantee that the user will have scripting enabled. Further, he may reset his window size to any value at any time. On my Linux box, I can even make the window larger than the monitor size. How would you deal with that? Why would you? CSS provides the means to make your layout fixed, elastic or completely liquid. There is no sane reason to do what you propose. cheers, gary
There's this article: http://alistapart.com/articles/switchymclayout But it has a reliance on JavaScript, thus shouldn't be used. CSS3 will see this feature implemented (http://www.w3.org/TR/css3-mediaqueries/#media1) and believe only opera supports it at the moment. This one looks awesome: @media screen and (device-aspect-ratio: 16/9) { ... } Code (markup):
Switchy McLayout SUCKS. And I don't say that lightly either. I also find it funny that the main thing "Switchy" is designed for (mobile users) isn't even supported by most mobile devices. Until CSS3 is supported properly by all four of the major rendering engines (given Microsoft's lax attitude for standards, probably not until 2020 or so - again, something I do not say lightly), your best bet will be to create an elastic layout (one that is capable of text-resizing without breaking the layout) that also expands and contracts depending on the available real estate in the browser window (thus the "liquid" or "fluid" part of "liquid layout" and "fluid layout).