Question

当在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

Answer 1

以下是您编写的输出CSS。

@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;
  }
}

你的#header只会，我的意思是，只有400px和600px之间的样式background: red; color: black才会出现在纵向上，并且只会，我只是说，只有样式{{1}在横向上应用于800px和1024px之间。你那里有一些非常严格的媒体查询。通过为每个媒体查询指定background: blue;，min-width，和 max-width（更不用说媒体类型），您可以将样式锁定为仅应用于具体的地方，没有其他地方。这是非常不可持续的，并导致你看到的混乱的造型。

如果我是你，我会对此采取完全不同的方法。您应该先从您的内容开始，在设计中断时选择断点（不是设备所在的位置），并且在应用媒体查询时更加自由。我已经就此进行了不少介绍，我的Responsive Web Design with Sass+Compass应该可以帮助您更好地了解哪些工具已经可用于响应Sass（以及如何选择断点），以及{{3}将首先向您展示一系列工具/技术/原因以及如何设计内容。

Breakpoint-sass：为什么样式适用于错误的设备宽度？

1 个答案: