【问题标题】:How to add a PX fallback to Zurb Foundation 4 REM function?如何向 Zurb Foundation 4 REM 功能添加 PX 回退?
【发布时间】:2013-06-23 09:37:38
【问题描述】:

我正在使用 Zurb Foundation 4 框架中的这个 SCSS 函数:

@function remCalc($pxWidth) {
  @return $pxWidth / $em-base * 1rem;
}

它只返回一个 REM 值,所以它不适用于 IE8。是否可以添加 PX 后备以支持 IE8?我对 SASS 函数的编码不熟悉。

【问题讨论】:

    标签: sass zurb-foundation fallback


    【解决方案1】:
    @mixin font-size($pxWidth){
      font-size:$pxWidth;
      font-size:remCalc($pxWidth);
    }
    .yourclass {
      @include font-size(16px); //outputs font-size:16px; font-size:1rem;
    }
    

    【讨论】:

      【解决方案2】:

      如 Foundation 4 Docs 中所述,不支持 ie8,请参阅他们的扩展文章,完整解释他们为什么不再支持它。

      如果您正在寻找 IE8 支持,他们建议您恢复到 Foundation 3.2

      http://foundation.zurb.com/docs/faq.html

      【讨论】:

        【解决方案3】:

        最好的解决方案是使用 polyfill 在 IE8 和更早版本中启用 rem 支持。

        不幸的是,我不确定是哪一个。尝试html5shimIE9.js 作为初学者。

        有问题的函数是一个函数,而不是一个 mixin。所以它不能提供后备。考虑为此目的编写自己的 mixin。您可以使用some hacks 使一行CSS 仅适用于IE。

        【讨论】:

        • 我想避免 polyfill 或条件加载另一个样式表...我想我可以集成 px 后备解决方案 snook.ca html { font-size: 62.5%; } 正文 { 字体大小:14px;字体大小:1.4rem; } /* =14px / h1 { 字体大小:24px;字体大小:2.4rem; } / =24px */ 进入函数...现在我知道它必须是一个 mixin
        猜你喜欢
        • 2013-08-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-07-13
        • 2023-03-29
        • 2013-09-03
        • 2013-04-08
        • 1970-01-01
        相关资源
        最近更新 更多