Change web CSS depending on resolution

Question

So, I made 2 CSS files for my website, normal.css and widescreen.css, i'd like my website to use a different CSS file depending on the resolution, normal.css in normal case, and widescreen.css assuming that the screen width is bigger than 1280

Thanks

Answer 1

Supported by most modern browsers. Note this wouldn't work with IE8 or lower I believe.

@media screen and (min-width: 1024px){
  /* CSS here */
}
@media screen and (max-width: 1024px){
  /* CSS here */
}