6

ブラウザーが webkit を使用している場合は 1 つのスタイルを適用し、そうでない場合は別のスタイルを適用する単一の CSS ファイルを作成しようとしています。Webkit を使用しているかどうかを確認する方法を読みました。

@media (-webkit-min-device-pixel-ratio:0)

ただし、Webkit を使用していないかどうかを確認する方法がわかりません。メディアクエリの前に追加しようとしnotましたが、うまくいかないようです。誰かがそれを行うための解決策またはより良い方法を持っていますか? ありがとう。

4

3 に答える 3

1

あなたは最小で試すことができます：

@media screen (-webkit-min-device-pixel-ratio: 0)

そして最大：

@media screen (-webkit-max-device-pixel-ratio: 0)
于 2013-03-14T11:40:53.410 に答える
0

-webkit-line-clamp今のところ Webkit のみの機能のように見える を扱うときに、この質問に行き着きます。

したがって、このために作成するscss mixinは

@mixin line-clamp($line) {
  height: calc(1.3em * #{$line});
  &:after {
    content: '...';
  }

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
  }

  @media screen and (min--moz-device-pixel-ratio:0) {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    padding-right: 10px;
    &:after {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}

異なるメディア クエリを使用して、webkit と Firefox の scss を分離します。

于 2015-09-17T04:31:17.687 に答える