With a Media Query defined for a web page, we can now interactively create and adjust the styles for each targeted browsing environment. In order to do this we will re-open the Multiscreen Preview for the page.
Wait! You might exclaim, how can we edit the page in Multiscreen Preview, when that window functions like the Live view in the Document window—locking out any content editing. A thoughtful concern, but here we will be only editing the CSS styles, not the page content. Moreover, we can do in Multiscreen Preview.
In order to edit styles in Multiscreen Preview, view the CSS Styles panel (Window | CSS Styles). The three attached styles, along with parenthetical notes helping us remember which style is which, appear in the top half of the CSS Styles panel. You can expand any of those three styles by clicking on the triangle next to the style name in the top half of the CSS Styles panel. In the following screenshot, the query_phone.css style is expanded...