I wonder what is the best way to make a Desktop/Mobile page responsive with Polymer Elements' iron-media-query? Of course, the CSS could define a responsive behavior with
@media only screen and (max-device-width : 768px)
body {font-size: 14px} ...
@media only screen and (min-device-width : 768px) ...
body {font-size: 18px} ...
However, Polymer Elements provides the iron-media-query.
Now, what's better? And most important: How can I apply a responsive font-size for my whole body or a specific div's padding with iron-media-query so that the overall font size adjusts (all css elements are defined as x.em)?
The iron-media-query is mostly to allow binding the result of a query to an element like the paper-drawer-panel that collapses when the screen size is below a certain threshold. For global settings just use normal CSS. This way fonts and other resources can already be downloaded while Polymer is being initialized.