title: Angular 2, Media Queries not working when combined with [ngStyle] directive
body: <p>I have set some custom attributes on a div </p>
  
  <pre><code> &lt;div class="logout-container"
  
               [ngStyle]="{'margin-left': (theme.logoutButtonMarginLeft | convertpx ),
                       'margin-top': (theme.logoutButtonMarginTop | convertpx ),
                       'margin-right': (theme.logoutButtonMarginRight | convertpx ) }"
  </code></pre>
  
  <p>I am also using Media Queries to set the value for smaller screen sizes. The idea being to maintain a certain look and feel for smaller devices but allow the user some freedom on larger screens.</p>
  
  <pre><code>@media all and (max-width: 768px) and (min-width: 1px) {
  
  .logout-container {
      margin-right: 20px;
      margin-right: 20px;
      margin-top: 20px;
  }
  </code></pre>
  
  <p>}</p>
  
  <p>However the above media queries have no effect and the margin values stay constant through all screen sizes. Using a different style syntax has no effect either. Thus using</p>
  
  <pre><code>&lt;div class="logout-container"
               [style.margin-top.px]="theme.logoutButtonMarginTop"
               [style.margin-left.px]="theme.logoutButtonMarginLeft"
               [style.margin-right.px]="theme.logoutButtonMarginRight"
  </code></pre>
  
  <p>will not allow the media queries to take affect either.</p>