1

目前我有这个：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  h1.top-logo{
    background-image: url('../img/logo@2x.png');
    -moz-background-size: 180px 32px;
    -o-background-size: 180px 32px;
    -webkit-background-size: 180px 32px;
    background-size: 180px 32px;
  }
}

查看 sass 文档，他们提供了单个媒体查询的示例，这......我想这会起作用，但是当我真的只需要一个时，我有 4 个媒体查询和重复的 css。

我尝试了 css2sass 转换器（只是想看看它的建议http://css2sass.heroku.com/）它给了我这个：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5)
  h1.top-logo
    background-image: url('../img/logo@2x.png')
    -moz-background-size: 180px 32px
    -o-background-size: 180px 32px
    -webkit-background-size: 180px 32px
    background-size: 180px 32px

这给了我一个错误：only screen and ": expected selector, was "(-o-min-device-..."

不知道从这里去哪里。

编辑

我想我总是可以将它放在一个单独的文件中，并在 html 中使用媒体查询。

4

1 回答 1

2

这就是我现在最终解决它的方式：

@mixin mobi-logo-fix
  h1.top-logo
    background-image: url('../img/logo@2x.png')
    -moz-background-size: 180px 32px
    -o-background-size: 180px 32px
    -webkit-background-size: 180px 32px
    background-size: 180px 32px


@media only screen and (-webkit-min-device-pixel-ratio: 1.5)
  @include mobi-logo-fix
@media only screen and (-o-min-device-pixel-ratio: 3/2)
  @include mobi-logo-fix
@media only screen and (min--moz-device-pixel-ratio: 1.5)
  @include mobi-logo-fix
@media only screen and (min-device-pixel-ratio: 1.5)
  @include mobi-logo-fix

结果相同，它没有结合 css，但是 mixin 让我只能将代码放在一个位置。

于 2012-05-04T12:53:02.897 回答