Opera Mobile Emulator とデバイスで確認すると、wvgaPort のスタイルは 599px でのみ適用され、次に 800 では 1200 で、1024 では 1533 で適用されるように見えます。そして、これらのメディア ルールを定義するより良い理由は何でしょうか?
/* 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