Responsive UI with new af:matchMediaBehavior in ADF 12.2.1.0

Jdeveloper and ADF 12.2.1 comes with many new features ( see these posts-
New look of dvt:funnelChart for Data Visualization in Jdeveloper 12.2.1.0
New look of dvt:pieChart as donut chart for Data Visualization in Jdeveloper 12.2.1.0  )
and supports responsive UI design.
Masonry Layout and MatchMediaBehaivor tag is introduced to support responsive UI design

af:matchMediaBehavior allows developer to control properties of components according to screen size. It uses CSS media queries to detect screen size and changes value of specified property of component

New look of dvt:pieChart as donut chart for Data Visualization in ADF 12.2.1.0

Oracle Jdeveloper 12C (12.2.1.0) documentation tells about a new enhancement in look of pie chart

We can now design donut chart using dvt:pieChart , innerRadius property allows us to create donut chart look on the base of default pie chart.
Donut chart is nothing just a variation of pie chart that show data in sections of a circle, I believe everyone knows how to design a pie chart in ADF Faces

Responsive UI with new Masonry Layout in ADF 12.2.1.0

What is Responsive UI and Why it is Important-

User interface or view of website or web application changes as the screen size of device changes
This type of UI is called Responsive and it is important to design responsive UI for your application because each device have different screen dimension and you can not restrict user to use any specific device to view your application . This is very basic requirement of web development that UI should look good on Mobile, PC, Tablet or any other device