CSS Code Hinting in Dreamweaver
How to Apply CSS3 Effects and Transforms in Dreamweaver
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver

How to Create a Media Query in Dreamweaver

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:

1

Click the Media Queries button.

The Media Queries dialog box opens.

2

In 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.

3

Click the Force Devices to Report Actual Width check box.

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

4

Click 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.

5

To 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.

6

Click 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.

7

Define 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.

8

Click 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.

blog comments powered by Disqus
Create a New Style Sheet in the CSS Styles Panel
How to Work with Slider in CSS3
CSS3 For Dummies Cheat Sheet
Positioning Properties of Cascading Style Sheets (CSS)
How to Add Special Color Effects on CSS3 Sites
Advertisement

Inside Dummies.com