How to Create a Media Query in Dreamweaver - dummies

By David Karlins, Doug Sahlin

Media Query identifies a media (print, screen, handheld device, and so on) and displays the HTML page with a CSS style sheet based on that media. So, for example, if the page is opened in an Android mobile device, it would display with a narrower container to fit the phone and a higher contrast color scheme that worked well in sunlight.

With your alternative CSS files created and saved, view the HTML page to which they’ll be linked in the Multiscreen Preview window. To create a media query in Dreamweaver, follow these steps:

1Click the Media Queries button.

The Media Queries dialog box opens.

2In the Write Media Queries To area, select This Document (to define the media query for the open document).

To generate a sitewide Media Queries file that can be applied to other pages in your Dreamweaver site, select the Site Wide Media Queries File option and then click the Specify button to navigate to and select a folder and filename for that purpose.

3Click the Force Devices to Report Actual Width check box.

A special tag is inserted that produces more accurate width values from queried media.

4Click the “+” button to generate the first media query. In the Description box, enter a comment that reminds you what this query is for (such as laptops, tablets, mobile devices, and so on).

For example, if you’re defining a style to be used on desktops and laptops, you might describe it as Desktops and Laptops.

5To define a minimum width for the media query, enter a value in the Minimum Width box.

A good minimum width for full-screen layouts is 960 pixels.

6Click the Use Existing File button and navigate to the CSS file you want to use in full-sized browser environments.

This figure illustrates this first defined media query.

7Define at least one additional media query by repeating steps 4–6.

For example, if you have a CSS file for tablets and smartphones, make that your second option and define a maximum width of 959 pixels.

8Click OK in the Media Queries dialog box.

You return to the Multiscreen Preview window where you can see how your page will look in the devices for which you defined a media query.