CSS media queries and elements width

Question

Does the width specified in the media queries represent the size of devide screen or it is the inner width of the browser in the mobile device.

If I specify an element width same as min-width defined in media query, will a horizontal scrollbar appear at some point?

For example:

@media screen and (min-width: 460px) and (max-width: 800px){

    .wrapper{
        width: 460px;
    }
}

If that's not correct, what should be maximum width of .wrapper in order to avoid the scroll bar?

Answer 1

According w3c width in media queries is

The ‘width’ media feature describes the width of the targeted display area of the output device.

For screen it will be width of browser window.

You can use device-width feature to make your markup responsive to device screen.

W3c specification: http://www.w3.org/TR/css3-mediaqueries/#width