Deprecated! New approach with isw-responsive.

Provides feedback about device and orientation, using material design breakpoints.

https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints

• screenWidth (Number)
• screenHeight (Number)
• device (String, "mobile", "tablet", "desktop")
• orientation (String, "portrait", "landscape")

It's recommended to use it only once (e.g. in the app) and propagate it to the children (e.g. the views) via properties. Make sure to set reflectToAttribute if attribute selectors are used in the view.

Polymer 2.0:

class MyApp extends Polymer.mixinBehaviors([ iswResponsiveBehavior ], Polymer.Element ) {
  ...
}

Polymer 1.0:

Polymer({
  is: 'my-app',
  behaviors: [ iswResponsiveBehavior ]

  ...
});

The device and orientation properties reflect to attribute, so attribute selectors can be used.

:host([device="desktop"]) .someSelector { ... }
:host([device="mobile"][orientation="landscape"]) .someSelector { ... }

Some of our elements, e.g. isw-toolbar, are using device and orientation to display. Simply bind these properties to make them responsive.

<isw-toolbar device="[[device]]" orientation=[[orientation]]> ... </isw-toolbar>

iswResponsiveBehavior gets the onResize function called, with Polymer 2.0 classes it can be used like a lifecycle function.

onResize() {
  super.onResize();

  switch( this.device ) {
    case 'desktop':
      // Desktop.
      break;
    case 'tablet':
      // Tablet.
      break;
    default:
      // Mobile.
  }
}