获取 polyfill "vminpoly" 使用内部 CSS

Question

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

Only linked stylesheets are being parsed right now but it's very easy to also parse 'style' elements.

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

获取 polyfill "vminpoly" 使用内部 CSS

Getting polyfill "vminpoly" working with internal CSS

javascript

css

internet-explorer-7

polyfills

viewport-units