Responsive design 重写ZURB基金会的段落字体大小

使用Foundation/SASS，我试图找到一种方法来覆盖iPad的横向段落字体大小

在基金会的_settings.scss文件中，我试图使用下面的媒体查询，但似乎无论查询本身是什么，它都会被跳过并使用后一种设置

已创建此媒体查询（但在_settings.scss中似乎没有一个可用）：

接下来的几行中，我尝试覆盖$段落字体大小：

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

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

我在另一个自定义scss文件（extras.scss）中尝试了这种方法：

然后，我尝试将媒体查询嵌套在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） 所有iPad浏览器都认为其屏幕分辨率为768x1024

在您最初的媒体查询中，您有

最小宽度：1224px

，它永远不会与任何iPad匹配

2） SASS表达式将被执行，无论它们是否包装到媒体查询中。SASS不知道结果CSS的查看分辨率，因此以下代码：

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

毫无意义，只相当于

$段落字体大小：emCalc（12px）

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

3） 我没有iPad，所以无法测试，但您上次的媒体查询
@仅媒体屏幕和（最小宽度：1000px）和（-webkit最小设备像素比：2）
在我看来很可靠。它应该只在风景区相配。
谢谢，真不敢相信我错过了。我知道它忽略了媒体查询，但现在它有了意义——没有CSS，只有一个SASS变量。
p { 
  @media only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) {
      font-size: 12px !important;
  }
}

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