是否有任何跨浏览器JavaScript可以使vh和vw单元正常工作

  • Z时代
  • 2024-01-10
  • 分类：问答

注意：好的，而我打字这个问题，我碰上了这个 问题，这说明使用@media query，但被要求早在2011 …

正如你所知道CSS3引入了新的视口百分比长度单位，vh并且vw，我觉得是非常有用了坚实的响应式布局，所以我的问题是，是否有任何的JavaScript /jQuery的替代这个？除了将其用于字体大小之外，用于元素大小设置是否安全？像例子

div {
   height: 6vh;
   width: 20vh;  /* Note am using vh for both, do I need to use vw for width here? */
}

回答：

CSS（属性）修复插件等的fancybox使用.css('margin-

right')抓取元件的右边距与.css('margin-right','12px')设置元素的右边缘。这被破坏了，因为没有检查是否props是字符串以及是否提供了多个参数。通过检查是否props为字符串来修复它。如果是这样并且有多个参数，则将参数重写为对象，否则parseProps($.extend( {}, props ) )不使用。

用于响应式布局的插（在工作中）

我尝试了一下。首先，这里是CSS示例：（调整输出面板的大小）。请注意，font-

size至少在最新版本的Chrome上，不适用于视口单元。

这是我使用jQuery进行的尝试。也可以使用该字体的jQuery演示位于。尚未对其进行广泛的测试，但它似乎可用于大多数属性，因为它只是将值转换为像素，然后通过调用其插件window.resize来保持更新。

更新了代码以与许多浏览器一起使用。如果您使用的不是Chrome，请在本地进行测试，因为jsBin的行为有点怪异window.resize。

扩展本机css方法。

处理插件内部的window.resize事件，以便现在无缝集成。

/*
 * CSS viewport units with jQuery
 * http://www.w3.org/TR/css3-values/#viewport-relative-lengths
 */
;(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
      , originalArguments = arguments
      , update = function() {
          if ( typeof props === 'string' || props instanceof String ) {
            if (originalArguments.length > 1) {
              var argumentsObject = {};
              argumentsObject[originalArguments[0]] = originalArguments[1];
              return _css.call(self, parseProps($.extend({}, argumentsObject)));
            } else {
              return _css.call( self, props );
            }
          } else {
            return _css.call( self, parseProps( $.extend( {}, props ) ) );
          }
        };
    $win.resize( update ).resize();
    return update();
  };
}( jQuery, window ));
// Usage:
$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

以上是 是否有任何跨浏览器JavaScript可以使vh和vw单元正常工作 的全部内容， 来源链接： utcz.com/qa/399659.html

回到顶部