让 polyfill “vminpoly” 与内部 CSS 一起工作答案

【问题标题】：Getting polyfill "vminpoly" working with internal CSS让 polyfill “vminpoly” 与内部 CSS 一起工作
【发布时间】：2020-06-05 20:38:04
【问题描述】：

在 Saabi 的 vminpoly github 上，一个 vw 和 vh 单元 polyfill (https://github.com/saabi/vminpoly)，上面写着：

现在只解析链接的样式表，但这很容易也解析“样式”元素。

样式元素内的 vw 和 vh CSS 如何与 vminpoly 一起使用？

【问题讨论】：

您是否需要在内部样式元素中填充vw、vh？我没有找到用 vminpoly 做到这一点的方法。您使用的是哪个版本的浏览器？我认为最好的方法是在链接样式表中编写 css 样式，然后使用 vminpoly。
Plolyfilling 仅 vw 特别是（仅适用于桌面宽度上的字体大小）。 Internet Explorer 6、7 或 8，无论工作如何。

标签： javascript css internet-explorer-7 polyfills viewport-units

【解决方案1】：

你可以参考下面的代码来支持vh，特别是vw：

(function($, window) {

  var $win = $(window),
    _css = $.fn.css;

  function viewportToPixel(val) {
    var percent = val.match(/\d+/)[0] / 100,
      unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent + 'px';
  }

  function parseProps(props) {
    var p, prop;
    for (p in props) {
      prop = props[p];
      if (/[vwh]$/.test(prop)) {
        props[p] = viewportToPixel(prop);
      }
    }
    return props;
  }

  $.fn.css = function(props) {
    var self = this,
      update = function() {
        return _css.call(self, parseProps($.extend({}, props)));
      };
    $win.resize(update);
    return update();
  };

}(jQuery, window));

//Usage:
$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

body {
  margin: 0;
}

div {
  background: #fa7098;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>hello</div>

IE中的结果是这样的：

【讨论】：

这对我来说是一个有效的替代品，而不是 vminpoly。谢谢。