Question

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

Answer 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)看起来很稳固。它应仅在风景中匹配。