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;
}
}