CODEWITHSUNDEEP
csspolymerpolymer-1.0web-component
JohnnyDeer
JohnnyDeer

Reputation: 231

Polymer Elements - Responsive <body> font size

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)?

Upvotes: 3

Views: 321

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657148

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.

Upvotes: 4

Related Questions