Breakpoint-sass: why styles apply at wrong device width?

Question

When check it in Opera Mobile Emulator and on devices, it appears, that styles for wvgaPort apply only at 599px, then for 800 - at 1200, for 1024 at 1533. Why does it happen? And what is a better why to define these media rules?

/* Media */

$wvgaPort: 400px
$wvgaLand: 800px
$wsvgaPort: 600px
$wsvgaLand: 1024px
$desktop: 1280px

=apply-to($media)
    @if $media == smartPort
        @media only screen and (min-device-width: $wvgaPort) and (max-device-width: $wsvgaPort) and (orientation: portrait) 
            @content

    @else if $media == smartLand 
        @media only screen and (min-device-width: $wvgaLand) and (max-device-width: $wsvgaLand) and (orientation: landscape) 
            @content

    @else if $media == tabPort
        @media only screen and (min-device-width: $wsvgaPort + 1) and (max-device-width: $desktop) and (orientation: portrait) 
            @content

    @else if $media == tabLand
        @media only screen and (min-device-width: $wsvgaLand + 1) and (max-device-width: $desktop) and (orientation: landscape) 
            @content  

html, body
    +apply-to(smartPort)
        font-size: 87.5% !important

#header
    +apply-to(smartPort)
        background: red
        color: #000
    +apply-to(smartLand)
        background: blue

score 1 · Accepted Answer · answered Jul 23 '13 at 11:02

Here is the output CSS for what you've written.

@media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (orientation: portrait) {
  html, body {
    font-size: 87.5% !important;
  }
}

@media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (orientation: portrait) {
  #header {
    background: red;
    color: black;
  }
}

@media only screen and (min-device-width: 800px) and (max-device-width: 1024px) and (orientation: landscape) {
  #header {
    background: blue;
  }
}

Your #header will only, and I do mean only, have the styles background: red; color: black between 400px and 600px when in portrait and will only, and again I mean only, have the style background: blue; applied to it between 800px and 1024px in landscape. You've got some very very stringent media queries there. By specifying min-width, max-width, and orientation for each media query (not to mention the media type), you are locking your styles to only applying at those specific places, and nowhere else. This is very unsustainable and leads to the confused styling you're seeing.

If I were you, I'd take an entirely different approach to this. You should be starting with your content first, choosing breakpoint when your design breaks (not where devices live), and be much more liberal with when a media query can apply. I've done quite a few presentations on this, my Responsive Web Design with Sass+Compass should help you get a better understanding of what tools are already available to you for building responsively with Sass (and how to choose breakpoints), and Style Prototyping will show you a set of tools/techniques/reasons why and how to design content first.

Thanks, Snugug! You are abs right! =) Yesterday I tried a but simpler style, but with same stringent media rules. It worked as I needed, though, I will try and improve them according to your answer. Here is the code: $smart: (min-device-width 480px) (max-device-width 600px) $smart-tab: (min-device-width 600px) (max-device-width 1024px) $tab: (min-device-width 1024px) (max-device-width 1280px) — orendzi, Jul 24 '13 at 11:04

Breakpoint-sass: why styles apply at wrong device width?

1 Answers1