0

Foundation/SASS を使用して、横向きの iPad 用に段落のフォント サイズをオーバーライドする方法を見つけようとしています。

Foundation の _settings.scss ファイルでは、以下のメディア クエリを使用しようとしていますが、クエリ自体に何が含まれていても、スキップされて後者の設定が使用されているようです。

このメディア クエリを作成しました (ただし、_settings.scss 内では機能しないようです):

$ipad-landscape: "only screen and (min-width: 1224px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)";

数行下で、$paragraph-font-size をオーバーライドしようとしました。

$paragraph-font-size: emCalc(16px);

@media #{$ipad-landscape} {    
    $paragraph-font-size: emCalc(12px);
}

追加のカスタム scss ファイル (extras.scss) でこのアプローチを試しました。

@media #{$ipad-landscape} {

 p { font-size: emCalc(12px) !important; }

}

次に、extras.scss のタグにメディア クエリをネストしてみました。

p { 
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      font-size: 12px !important;
  }
}

min-width、min-device-width、または orientation を追加しようとすると、再び壊れます。

p { 
  @media only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) {
      font-size: 12px !important;
  }
}
4

1 に答える 1