Edit on
<h1>PX vs EM-based media queries (start @ desktop > 960px)</h1>
<p>For default browser settings, the PX & EM values will be the same, and background colors will change at the same time when you resize from ~desktop to ~mobile size</p>
<p>But compare layout across changing browser zoom (eg. `cmd+`) vs increasing font size via browser settings (found under "advanced" in Chrome, Preferences > Content in FF) - the EM and the PX-based queries trigger at different sizes</p>
<p>Additionally, Safari 8 shows the same inconsistent behavior for both `cmd+` and text zooming</p>
<div class="responds-px">PX-based layout - media query responds to pixel values</div>
<div class="responds-em">EM-based layout- media query responds to em value</div>
@import "bourbon";

div {
  text-align: center;
  padding: 200px 0;
  &:after {
    display: block;
  }
}

/*Pixel based breakpoints*/
$px-large: 960px;
$px-small: 650px;

@media (min-width: $px-large) {
  .responds-px {
    background: yellow;
    &:after {
      content: "responds to min-width #{$px-large}";
    }
  }
}

@media (max-width: $px-small) {
  .responds-px {
    background: blue;
    &:after {
      content: "responds to max-width #{$px-small}";
    }
  }
}

/*EM based, using bourbon's em function*/
$em-large: em(960);
$em-small: em(650);

@media (min-width: $em-large) {
  .responds-em {
    background: red;
    &:after {
      content: "responds to min-width #{$em-large}";
    }
  }
}

@media (max-width: $em-small) {
  .responds-em {
    background: green;
    &:after {
      content: "responds to max-width < #{$em-small}";
    }
  }
}
View Compiled
Rerun