Difference between width and device-width in CSS media queries

Question

What is the difference (in simple terms) between height and width and device-width and device-height?

Answer 1

If you define device-width means your particular css is call when you open your page in iphone, ipad ,ipod & mobile device . for example :

@media only screen and (max-device-width:480px){
        body{
          color:red;
        }
    }

or if you define width which means your particular css is call when your window is resize . for example :

@media only screen and (min-width: 481px) and (max-width: 1024px) {
        body{
         color:yellow;
        }
    } 

for more info please check http://webdesignerwall.com/tutorials/css3-media-queries , http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/