Understanding Media Queries

A media query is an alternative group of settings in a stylesheet. These settings are automatically used under certain conditions, such as when a screen of a certain size is displaying the output. Media queries are able to do this because they are configured with specific criteria (e.g., maximum width of the screen, orientation, resolution). When the criteria are met, the style settings in the media query are used to display the output. You do not tell a Flare target to use a media query; it just happens automatically.

You can place any valid CSS style settings in a media query, just as you can in a medium. For example, if you want paragraph text to suddenly turn blue when a topic is viewed on an iPhone, you can edit the mobile media query, telling it to use a blue font for all paragraph styles.

How to Select Media Queries in the Stylesheet Editor

One of the most common ways to use a media query is to identify a width setting for a device with a different screen size. Let’s take a look at the media queries that come with Flare.

1. From the Content Explorer, expand Resources > Stylesheets, and double-click the Styles.css file.

2. From the local toolbar of the Stylesheet Editor, make sure the first button is labeled View: Advanced.

   Note You can select a media query in the editor’s Simplified view. In that case, whichever media query you choose becomes the editable one.

3. In the left pane tree structure, select p.

4. From the local toolbar, click the Medium drop-down.

   

   A couple of media queries (tablet and mobile) are already provided in Flare. You can create additional media queries from the Stylesheet Editor if you want, but most authors will be able to do everything they need with just the tablet and mobile media queries. The tablet media query is designed to be used on medium-sized screens, such as iPads. The mobile media query is designed to be used on smaller screens, such as smart phones. (The print item in the drop-down is actually a medium, not a media query. The default is a medium but can also be considered a media query in its relationship with the tablet and mobile items.) See Mediums and Media Queries.

5. Click the check box next to the Medium: tablet item. The media query opens in a new window pane next to the default medium in the editor.

   

6. Select the drop-down again, and click the check box next to the Medium: mobile item. It opens in the editor.

   

7. Expand different property groups in the media query window panes. Notice how the styles are initially inherited from the default medium.

   

How to Edit Tablet and Mobile Breakpoints

The tablet and mobile media queries are tied to the responsive output settings on the Skin tab of the Target Editor for HTML5 targets. The breakpoints provided in the target determine the point at which your media queries will become active in displaying the different style settings.

1. From the Project Organizer, expand Targets, and double-click All-About-Austin-HTML5.

2. In the Target Editor, select the Skin tab.

3. The default tablet breakpoint is 1279px, and the default mobile breakpoint is 767px. Let’s round those numbers down respectively, type 1200 pixels (tablet), and type 700 pixels (mobile).

   

4. Click to save your work.