Css Media Queries Resolution Issue

Question

I was wondering how I can use CSS Media Queries to detect screen resolution and make a different page load if the screen resolution is under 1024x768? I also need to know if I can place this query in my master.css script? or where it would need to be placed?

Sitemap (without Java included)

• Index.html (Main Page)
• About.html (About Page)
• Missing.html (404)
• Small.html (the smaller version I am trying to get to load)
• ie8.css (conditional css for internet explorer 8)
• Master.css (Main Stylesheet)

Answer 1

You can serve up different styles to a page based on the width of the browser viewport in various ways, such as this:

@media only screen and (max-width: 1024px) {
  your styles here
}

You can put that anywhere in your style sheets.

Be aware, though, that you can't use media queries like this to load a different page . For that, you'd need some kind of device detection script.