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のドキュメントを見ると、単一のメディアクエリの例が示されています...うまくいくと思いますが、実際には1つしか必要ないときに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 を使用すると、コードを 1 か所にしか配置できません。

于 2012-05-04T12:53:02.897 に答える