是否有任何跨浏览器的javascript使vh和vw单位工作 [英] Is there any cross-browser javascript for making vh and vw units work

问题描述

注意：当我输入这个问题时，我遇到了这
问题，建议使用 @media查询，但被要求回
2011 ...

正如你所知CSS3引入了新的视口百分比长度单位， vh 和 vw 我觉得真正有用​​的一个坚实的响应布局，所以我的问题是，有没有任何JavaScript / jQuery的替代品呢？除了使用它的字体大小，是否可以安全地用于大小的元素？像示例

  div {
 height：6vh; 
 width：20vh; / *注意我使用vh的两个，我需要使用vw的宽度这里？ * / 
} 
  

解决方案

5： .css（属性）修复
像 fancyBox 这样的插件使用 .css（'margin-right'）以获取元素的右边距和 .css（'margin-right'，'12px'）设置元素的右边距。这被破坏，因为没有检查如果 props 是一个字符串，如果有多个参数给出。通过检查 props 是否为字符串来修复它。如果是这样，并且有多个参数，则将参数重写为对象，否则不使用 parseProps（$ .extend（{}，props））。

更新4：用于响应布局的插件 https ：//github.com/elclanrs/jquery.columns （在作品中）

我给了这个（长）试试。首先是CSS示例： http://jsbin.com/orajac/1/edit#css。 （调整输出面板大小）。请注意， font-size 不适用于视口单元，至少在最新的Chrome上。

这里是我用jQuery做这个的尝试。使用字体的jQuery演示也在 http://jsbin.com/izosuy/1 / edit＃javascript 。没有测试它广泛，但它似乎工作与大多数属性，因为它只是将值转换为像素，然后通过调用插件 window.resize 它不断更新。 / p>

更新：更新的代码可与许多浏览器配合使用。如果您使用的不是Chrome，因为jsBin在 window.resize 有点奇怪。

更新2：扩展原生 css 方法。

/ strong>处理插件中的window.resize事件，以便现在无缝集成。

a href =https://gist.github.com/4341016 =nofollow> https://gist.github.com/4341016

  / * * CSS视口单位与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））; //用法：$（'div'）css（{height：'50vh'，width：'50vw'，marginTop：'25vh'，marginLeft：'25vw'，fontSize： '10vw'}）;  

Note: Ok while I was typing this question I came across this question which suggests to use @media query but was asked back in 2011...

As you know CSS3 introduces new Viewport-percentage length units, vh and vw, which I feel are really useful for a solid responsive layout, so my question is, is there any JavaScript/jQuery alternative for this? More over apart from using it for font sizes, is it safe to use for sizing elements? Like example

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

解决方案

Update 5: .css(property) fix Plugins like fancyBox use .css('margin-right') to fetch the right margin of an element and .css('margin-right', '12px') to set the right margin of an element. This was broken, because there was no check if props is a string and if there are multiple arguments given. Fixed it by checking if props is a string. If so and there is multiple arguments, arguments is rewritten into an object, otherwise parseProps( $.extend( {}, props ) ) is not used.

Update 4: Plugin for responsive layouts https://github.com/elclanrs/jquery.columns (in the works)

I gave this a (long) try. First here's the CSS example: http://jsbin.com/orajac/1/edit#css. (resize the output panel). Notice that the font-size doesn't work with viewport units, at least on latest Chrome.

And here's my attempt at doing this with jQuery. The jQuery demo which works with the font as well is at http://jsbin.com/izosuy/1/edit#javascript. Haven't tested it extensively but it seems to work with most properties since it's just converting the values to pixel and then by calling the plugin on window.resize it keeps updating.

Update: Updated code to work with many browsers. Test locally if you're using anything other than Chrome because jsBin acts a bit weird with window.resize.

Update 2: Extend native css method.

Update 3: Handle window.resize event inside of the plugin so the integration is now seamless.

The gist (to test locally): https://gist.github.com/4341016

/*
 * 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单位工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！