Building Media Query Strings

This topic describes the syntax to use when building media query strings for a Mobile Application Platform layout template. This topic also describes how to build media query strings for layout templates.

The PeopleSoft Mobile Application Platform supports the W3C recommendation for media queries.

Understanding Media Query String Syntax

The media query string syntax is: 

@Media [Logic] Type [and ([Quantify]Feature: Value) ... [Conditional Separator] ([Quantify]Feature: Value)

An example of a media query string is: 

@Media only handheld and (device-height:50px) and (max-device-width:100px)

Building Media Query Strings

This section describes using the Build Media Query Strings page to create a media query.

However, you can also manually code a media query by entering the string directly in the Media Query edit box in the Template Builder – Media Queries page.

To build a media query string:

  1. Access the Build Media Query String page.

    1. Select PeopleTools > Mobile Application Platform > Template DesignerPeopleTools, Mobile Application Platform, Template Designer. The Template Designer page appears.

    2. Click the Media Queries tab. The Media Queries page appears.

    3. Click the Build Media Query link.

  2. (Optional.) From the Logical Prefix drop-down list select a prefix.

  3. From the Type drop-down list select the media type to which the query applies.

  4. From the Conditional Separator drop-down list select a separator.

  5. Add features to the query string. In the Feature List grid:

    1. From the Quantify drop-down list select the quantifier for the feature.

    2. From the Feature drop-down list select a feature.

    3. In the Value field enter a value.

  6. To add more features, click the Add a Row button (+) and repeat Step 5.

  7. Click the Generate Media Query Text button to preview the query string.

    The media string appears in the text box below the button. Change any parameters as needed to the string and click the Generate Media Query Text button again to view the changes.

  8. Click the OK button.

  9. The Media Queries page appears and the query string that you built appears in the Media Query edit box.

  10. Click the Save button.

Click the Add a Row button (+) to add an additional media query to the template.

Click the Create Media Classes link to select one or more containers for the media query.

After you define a media query string, add the container or containers to which to apply the media query.