ADF: Responsive UIs using af:matchMediaBehavior
This is not a new component as it was released with version 12.2.1 back in November but it deserves a mention as it allows us to easily create responsive user interfaces. Although we were able to define media queries in our css and skin files, this component allows us to change component properties according to the screen size.
This component has 3 properties to look at:
- propertyName: Name of the property we want to change
- matchedPropertyValue: New value of the property
- mediaQuery: Here we can set the condition by defining a CSS media query. You can learn more about it here: CSS Media Queries