是否有任何跨浏览器的JavaScript用于使vh和vw单元工作

Question

是否有任何跨浏览器的JavaScript用于使vh和vw单元工作

注意:好的,当我输入这个问题时,我遇到了这个问题建议使用,@media query但在2011年被问到...

如你所知,CSS3引入了新的Viewport百分比长度单位,vh并且vw我认为它对于可靠的响应式布局非常有用,所以我的问题是,是否有任何JavaScript/jQuery替代方案？除了将它用于字体大小之外,是否可以安全地使用尺寸元素？像例子

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

elc*_*nrs 15

更新5:的CSS(属性)修正类似插件的fancybox使用.css('margin-right')抓取元素的右边距与.css('margin-right', '12px')设置元素的右边缘.这被打破了,因为没有检查是否props是一个字符串,并且是否有多个参数给出.通过检查if 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它上面的插件不断更新.

更新:更新的代码可与许多浏览器配合使用.如果你使用Chrome以外的任何东西在本地测试,因为jsBin有点奇怪window.resize.

更新2:扩展本机css方法.

更新3:处理插件内部的window.resize事件,以便现在无缝集成.

要点(在本地测试): 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'
});

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ale*_*ală 14

我正在使用Android 4.3股票浏览器面临这个问题(不支持vw,vh等).我解决这个问题的方法是使用'rem'作为字体大小的单位,并使用javascript动态更改<html>的字体大小

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
jQuery(window).resize(function(){
    var vw = (viewport().width/100);
    jQuery('html').css({
        'font-size' : vw + 'px'
    });
});

Run Code Online (Sandbox Code Playgroud)

在你的CSS中你可以使用'rem'而不是px,ems等

.element {
    font-size: 2.5rem; /* this is equivalent to 2.5vw */
}

Run Code Online (Sandbox Code Playgroud)

这是代码的演示:http://jsfiddle.net/4ut3e/

关于`rem`s,有一些版本的Android(不记得哪个)具有最小字体大小(在我的情况下是8px).因此,如果您的根字体大小最终为<8px,它将自动舍入为8px并可能会破坏您的布局. (4认同)

Answer 3

Kon*_*d G 7

我写了小助手来处理这个问题.它在所有主流浏览器上都受支持并使用jQuery.
这里是:

SupportVhVw.js

function SupportVhVw() {

    this.setVh = function(name, vh) {

        jQuery(window).resize( function(event) {
            scaleVh(name, vh);
        });

        scaleVh(name, vh);
    }

    this.setVw = function(name, vw) {

        jQuery(window).resize( function(event) {
            scaleVw(name, vw);
        });

        scaleVw(name, vw);
    }

    var scaleVw = function(name, vw) {

        var scrWidth = jQuery(document).width();
        var px = (scrWidth * vw) / 100;
        var fontSize = jQuery(name).css('font-size', px + "px");
    }


    var scaleVh = function(name, vh) {

        var scrHeight = jQuery(document).height();

        var px = (scrHeight * vh) / 100;
        var fontSize = jQuery(name).css('font-size', px + "px");
    }
};

Run Code Online (Sandbox Code Playgroud)

简单示例如何在HTML中使用它:

<head>

    <title>Example</title>

    <!-- Import all libraries -->
    <script type="text/javascript" src="js/libs/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/libs/SupportVhVw.js"></script>

</head>
<body>

                    <div id="textOne">Example text one (vh5)</div>
                    <div id="textTwo">Example text two (vw3)</div>
                    <div id="textThree" class="textMain">Example text three (vh4)</div>
                    <div id="textFour" class="textMain">Example text four (vh4)</div>

            <script type="text/javascript">

                    // Init object
                    var supportVhVw = new SupportVhVw();

                    // Scale all texts
                    supportVhVw.setVh("#textOne", 5);
                    supportVhVw.setVw("#textTwo", 3);
                    supportVhVw.setVh(".textMain", 4);

            </script>

</body>

Run Code Online (Sandbox Code Playgroud)

它可以在GitHub上找到:
https ://github.com/kgadzinowski/Support-Css-Vh-Vw

JSFiddle示例:http: //jsfiddle.net/5MMWJ/2/

为什么要处理attachEvent和addEventListener并导入jQuery？ (3认同)

归档时间：	13 年，5 月前
查看次数：	32618 次
最近记录：	7 年，7 月前