CODEWITHSUNDEEP
htmlcssmedia-queries
user1251698
user1251698

Reputation: 2143

CSS media queries and elements width

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?

Upvotes: 5

Views: 2109

Answers (1)

Nick Kugaevsky
Nick Kugaevsky

Reputation: 2945

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

Upvotes: 1

Related Questions