CodePen

HTML

            
              h2 Media Query Test
p.explain The two boxes below are sized via media query. The top one uses ems, and the bottom uses pixels. With a 16px base font size, both should be identical in width. Likewise for browser zooming. But when the base font size changes, most browsers will show them with different widths. (Change your browser's font size and drag the window width to see it in action.)

h3.em Em-based media query
p.em

h3.px Pixel-based media query
p.px

h4.how-to How to change base font size
ul
  li
    a(href="https://support.google.com/chrome/answer/95416?hl=en") Chrome
  li
    a(href="https://support.mozilla.org/en-US/questions/944922") Firefox
            
          
!

CSS

            
              = break($em)
  $px: #{($em * 16)}px
  $ems: #{$em}em
  @media (min-width: $ems)
    p.em
      width: $ems
      &:before
        content: "#{$ems} (16px * #{$em} = #{$px})"
  @media (min-width: $px)
    p.px
      width: $px
      &:before
        content: "#{$px}"



p.explain
  margin-bottom: 3em
p.px, p.em
  border: 1px solid #ddd
  padding: 1em 0
p.px
  background-color: lightblue
p.em
  background-color: lightgreen

.how-to
  margin-top: 4em
  padding-top: 1.5em
  border-top: 1px solid #ddd
    
+break(6)
+break(12)
+break(18)
+break(24)
+break(30)
+break(36)
+break(42)
+break(48)
+break(54)
+break(60)
+break(66)
+break(72)
+break(78)
+break(84)
+break(90)
+break(96)
+break(102)

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................