0

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
4

1 に答える 1