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

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意志，我的意思是，只有background: red; color: black在纵向时具有 400px 和 600px 之间的样式，并且只有在我的意思是，background: blue;在横向时应用的样式在 800px 和 1024px 之间。那里有一些非常严格的媒体查询。通过为每个媒体查询（更不用说媒体类型）指定min-width、和max-width，您将您的样式锁定为仅在这些特定位置应用，而不是在其他任何地方。这是非常不可持续的，并导致您看到的样式混乱。 orientation

如果我是你，我会采取完全不同的方法来解决这个问题。您应该首先从内容开始，在设计中断时（而不是设备所在的位置）选择断点，并且在何时可以应用媒体查询时更加自由。我已经为此做了很多演示，我的 Sass+Compass 的响应式网页设计应该可以帮助您更好地了解哪些工具已经可供您使用 Sass 进行响应式构建（以及如何选择断点），以及样式原型将首先向您展示为什么以及如何设计内容的一组工具/技术/原因。

于 2013-07-23T11:02:20.403 回答