You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
-
4:06Styles
-
4:47Style Classes
-
3:14Animated Style Classes
-
4:58Dynamic Style Classes
Take Topic Challenge
Supplemental Videos
-
1:54Element States
-
2:09Media Query
-
3:10Perspective Themes
LESSON
Media Query
Description
Learn how to use Media Queries to change the style of your Perspective components based on the device your Session is running on.
Video recorded using: Ignition 8.0
Transcript
(open in window)[00:00] In this lesson, we'll talk about Media Queries in style classes. A Media Query is an opportunity to change what a style class does based on the device that's launching, or hosting, the session. The reason you'd care about media queries is that they allow you to make changes to your styles based on things such as the width of the session. So I have a Label here which doesn't have a style class right now. Let's create a new one. So, from the Project Browser here, under Perspective, and Styles, I'll right click on the Styles folder and select New Style. We'll give this a name, I'll just call it MediaQuery for now, and create a style class. Now I'm not going to make any changes to the base style. Instead I'll hit the Add icon here, and select Media Query. And we can define some rules for the Media Query in the style class. So, for example, I'll change the Media Query to max width. And maybe change the pixel size to 500. I'll head over to text, and maybe increase the font size. So, if with hit OK here, I select my Label, and for the classes property here on my Label, let's use the new style class. So, I'll hit the dropdown, I select my Media Query here, and we'll save our project. Now for the media query rules, you may or may not see them in the Designer based on certain criteria. So, in this case, it might be easier for us to launch a session, and look at this View. So, it looks pretty much the same as my Designer in terms of font size here. But notice that when I reduce the width, it gets larger. So if I'm designing for both desktop and mobile, and I'm using the same views, I can use these Media Query rules to help improve readability on some of my screens.