覆盖 Zurb Foundation for iPad 中的段落字体大小答案

【问题标题】：Overriding paragraph font size in Zurb Foundation for iPad覆盖 Zurb Foundation for iPad 中的段落字体大小
【发布时间】：2013-06-12 08:06:44
【问题描述】：

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

当我尝试添加最小宽度、最小设备宽度或方向时，它再次中断：

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

【问题讨论】：

【解决方案1】：

有几个考虑：

1) 所有 iPad 的浏览器都认为自己的屏幕分辨率是 768x1024。

在您的原始媒体查询中，min-width: 1224px 永远不会匹配任何 iPad。

2) 执行 SASS 表达式，无论它们是否被包装到媒体查询中。 SASS 不知道最终的 CSS 将以何种分辨率查看，所以这段代码：

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

没有意义，仅相当于$paragraph-font-size: emCalc(12px);。

您必须在媒体查询中放置一些 CSS 声明，以便浏览器评估它们。

3) 我没有 iPad，所以我无法测试，但您的最后一个媒体查询 @media only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) 对我来说看起来很可靠。它应该只在横向匹配。

【讨论】：