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

小编典典

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

css

注意：好的，而我打字这个问题，我碰上了这个问题，这说明使用@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? */
}

阅读 461

2020-05-16

共1个答案

小编典典

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

更新4：
用于响应式布局的插（在工作中）

我尝试了一下。首先，这里是CSS示例：（调整输出面板的大小）。请注意，font- size至少在最新版本的Chrome上，不适用于视口单元。

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

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

更新2： 扩展本机css方法。

更新3： 处理插件内部的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'

});

2020-05-16