Setting wrapping elements widths

There is only one rule: the wrapping element's width should be smaller or equal to viewport's width.
Lets consider a particular simple structure:

<div id="page">
<div id="wrapper">
....
</div>
</div>

CSS rules
a stylesheet without Media query

#page{
width:100%;
}

Media query: "screen and (max-width: 480px)"

#wrapper{
width:320px; /*---the most common mobile viewport width--*/
}

Media query: "screen and (min-width: 481px) and (max-width: 767px)"

#wrapper{
width:480px; /*---smaller than minimal width of viewport--*/
}

Type: 
Is required: