Visual media query bars, Hide or show visual media queries, Switch between breakpoints – Adobe Dreamweaver CC 2015 User Manual
Page 169
162
Layout and design
Last updated 6/3/2015
Visual Media Query bars
Visual Media Query bars are a visual representation of the media queries present in a page. These bars help you visualize
your web page at different breakpoints and how different components of your web page reflow in different viewports.
While you view your page in different viewports, you can make design changes that are specific to a viewport without
affecting the page design in other viewports.
Visual Media Query consists of three bars as horizontal rows, each representing a category of media query:
•
Green
: Media queries with max-width conditions
•
Blue
: Media queries with both min-width and max-width conditions
•
Purple
: Media queries with min-width conditions
Note: The media queries listed in the CSS designer panel are also prefixed with these colors.
Each category can consist of one or more media queries. If a media query condition is not defined in the document,
then the corresponding visual media qurey bar, too, will not be displayed. For example, if the document does not
contain min-width conditions, then the purple bar is not displayed.
The breakpoint values are indicated on the bars - min-width at the left and max-width at the right of the bar.
A Breakpoints B Visual Media Query bars C Add media query icon D Scrubber
Hide or show Visual Media Queries
The Visual Media Query bar is visible in Live View by default. To hide the bar, you can use the Hide/Show button in the
Document Toolbar.
Switch between breakpoints
To view your page in a specific size (breakpoint), click the corresponding media query bar. The document will snap to
the breakpoint.
Alternatively, you can drag the scrubber to the required breakpoint.
To resize the view to the size of the Dreamweaver document window, do one of the following actions:
• Double-click anywhere in the grey area at the right of the document where you see the text 'Double Click To Fit
Width'. If you don't see the grey area, drag the scrubber to the left.