How to Create Custom Media Queries in Dreamweaver - dummies

How to Create Custom Media Queries in Dreamweaver

By Janine Warner

When you create pages using fluid grid layout features, Dreamweaver automatically creates the corresponding media queries for you, but you can create your own custom media queries and use them to target your own CSS rules.

Media queries have been in use on the web for more than a decade for other uses, such as creating an alternative page design optimized for printing. A media query is made up of a media type, such as screen or print (the two most common), and an optional expression that checks for particular features, such as the height or width. The most commonly used media types are

  • all: Suitable for all devices

  • print: Designed for print preview and for display when a page is printed

  • screen: For content displayed on any screen

The handheld media type is almost never used anymore and was best used only for cell phones and other devices with small screens, limited bandwidth, and monochrome displays that support only bitmapped graphics. iOS devices and most smartphones are categorized as screen media types.

How to apply styles to your Dreamweaver page designs

You can apply style sheets as external files by linking them or importing them, or you can include them as internal styles in the head region of your page’s HTML code. You can even target devices using inline styles — a handy option if you want to apply a specific rule only to certain devices.

You can use a combination of these options, and you can import, or link, multiple external style sheets to the same web page. After you’ve defined the media type with the media features you want to target, you specify how the styles should be applied to the page.

How to use media queries in external style sheets in Dreamweaver

You can use media queries with external style sheets in two ways. The first option is to link to one external style sheet with multiple sets of styles separated by media queries. That’s how Dreamweaver links the styles when you create a fluid grid layout.

The second option is to link two or more separate external style sheets to each HTML page and include the media queries in each style sheet. Either way, the code for the CSS and HTML are saved in separate files, and the <link> tag connects them.

Whether you save all media queries and related styles in one file or in separate CSS files, you can link additional style sheets to any HTML page as well. For example, you can include a separate set of styles in a separate style sheet that is designed to format the page when it is sent to a printer.

How to create media queries in Dreamweaver

You can create as many media queries as you like in Dreamweaver and you can include them in one CSS file or many. To create a new media query in Dreamweaver, follow these steps:

  1. Open the CSS Designer panel by choosing Window→CSS Styles.

  2. Select an existing style sheet in the Sources panel, or create a new one by clicking the plus sign (+) in the Sources panel.


  3. Click the plus sign (+) in the @Media panel in the CSS Designer panel.

    The Define Media Queries dialog box opens.

  4. Select Media from the first drop-down list and Screen from the second drop-down list.


  5. Move your cursor to the right of each the drop-down lists to make the plus sign appear, and then click the plus sign to add a new field.

    A new field appears in the Media Queries dialog box so that you can specify the orientation. This field is optional but is commonly used if you want to create different designs for landscape and portrait views on a tablet or a smartphone. If you don’t want to create additional layouts based on orientation, you can remove this field by clicking the minus sign.

    Note: The plus and minus signs become visible only when you roll your cursor over the right side of the dialog box.

  6. Move your cursor to the right of the drop-down lists, click the plus sign a second time to add a field, and enter a minimum width condition.

    The Min-Width field appears in the Media Queries dialog box so that you can specify the minimum width you want to use to target the query. The minimum width is important because the media query targets the styles based on the minimum to maximum width range you specify, covered in the next step.

  7. Move your cursor to the right of the drop-down lists, click the plus sign a third time to add a field, and enter the maximum width condition.

    The Max-Width field appears in the dialog box so that you can specify the maximum width you want to use to target the query.

  8. Click OK.

    The Media Queries dialog box closes and the media query is generated and added to the style sheet you selected in the Sources panel in the CSS Designer panel.

  9. To add additional media queries to any selected style sheet, repeat Steps 3–8. To add media queries to a different style sheet, repeat Steps 2–8.

Although you can save media queries in as many different styles sheets as you want, saving them all in one external style sheet is more efficient because each style sheet must be downloaded from the server separately, requiring more bandwidth. Downloading one long style sheet with multiple media queries is a little more efficient than downloading multiple style sheets.