Skip to main content
Version: 8.1

How to Change Text Size Based on Width

Since media queries react to viewport changes, we can use them to change the text size of a style class. Imagine a scenario where text needed to be larger on a smaller display, such as phone, to improve readability. That same text could likely be smaller on a desktop.

In this example, we will configure a media query that will change the text size for the Style Class when the screen is smaller.

  1. Create a new Style Class. We called ours MediaQuery.

  2. Under Style Rules, click on the Add icon and select Media Query.

  3. With the Media Query selected, change Media Query to max-width and the pixel value to 500px. We also set the Text Font size to 24px.

  4. Click OK to save the Style Class.

  5. Create a new component that contains text, or select an existing component within a container. In this example, we created a new Label component and placed it on a view.

  6. Assign the MediaQuery Style Class we just created to the Label component using the dropdown to browse Styles.

  7. Save the project.

  8. Launch a Perspective Session, and navigate to view containing the label (you may have create a page for the view). You will see the font size on the label change as you adjust the size of your session window.