detect screen resolution then compare

Question

I've problem with my css sheet of one page ,So been thinking to detect screen resolution if equal or less than 800 pixel width it will makes my css code is

<style>
body {width:1004px;}
</style>

but if it was greater than 800 pixel width, it will makes my css code is

<style>
body {width:100%;}
</style>

so anyone knows js code that code do it !! i only care about width detection no need to detect the hights as well. i've made search for alot of js code doing this but wasn't able to use to do this exact function of passing either of those css code into the page.

Answer 1

You can use CSS Media Queries

body {
  width:100%;
}
@media all and (max-width: 800px) {
  body {
    width:1004px;
  }
}