使用内部CSS获取polyfill“ vminpoly”

Question

在Saabi的vminpoly的github上，它是vw和vh单位的polyfill（https://github.com/saabi/vminpoly），它说：

现在仅解析链接的样式表，但这非常容易 还可以解析“样式”元素。

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

谢谢！我非常感谢您的帮助！

Answer 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中的结果是这样的：