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

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

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

1 回答 1

1

有几个考虑：

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

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

2) 无论是否包装到媒体查询中，都会执行 SASS 表达式。SASS 不知道将在哪个分辨率下查看生成的 CSS，所以这段代码：

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

是无意义的，相当于 just $paragraph-font-size: emCalc(12px);。

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

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

于 2013-06-16T09:16:55.277 回答