让 polyfill “vminpoly” 与内部 CSS 一起工作-解网

问：

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

现在只解析链接的样式表，但这非常简单来解析“style”元素。

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

javascript css internet-explorer-7 polyfills 视口单元

(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

评论

评论