当前位置: 首页 > 面试题库 >

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

祁飞飙
2023-03-14
问题内容

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

问题答案:

更新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'

});


 类似资料:
  • 我正在开发一个客户端音乐播放器,并正在寻找一种方法来保存与mp3数据完整的播放列表。 localStorage localStorage的5mb限制排除了该选项。我想知道还有什么其他选项。 DataURIs我读过DataURIs,例如,在使用data:URI时,有没有办法指定建议的文件名?和跨浏览器另存为。txt,但不建议默认文件名,尤其是缺乏IE支持,这些都是破坏交易的因素。 IndexedDB

  • 问题内容: 我刚刚了解了一个新的不常见的CSS单元。并分别测量视口的高度和宽度百分比。 vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%,依此类推。 这似乎与单位完全相同,这很常见。 在开发人员工具中,我尝试将值从vw / vh更改为%,反之亦然,并得到相同的结果。 两者之间有区别吗?如果没有,为什么要引入这些新单位? 问题答案: 可以达到任何高度。举例来说,如

  • 我刚刚了解了一个新的不常见的CSS单元。和分别测量视口的高度和宽度的百分比。 我从Stack Overflow看这个问题,但它使单元看起来更加相似。 vw和vh单元是如何工作的 答案特别说 vw和vh分别是窗口宽度和高度的一个百分比:100vw是宽度的100%,80vw是80%等。 这似乎与单元完全相同,后者更为常见。 在Developer Tools中,我尝试将vw/vh的值更改为%,反之亦然,

  • 问题内容: 截至本文发布之日,名称“ Microsoft Edge”才被正式宣布为新Windows 10的默认浏览器。 问这个问题还为时过早,但是我想知道是否有新的Selenium WebDriver可用,如果没有,是否有任何信息可以告诉我们我们期望等到开发出来再等多久? (Windows 10的技术预览版已经发布,因此在我看来这并不是一个愚蠢的问题。) 问题答案: 是的,Microsoft Ed

  • 我已经使用SOF很长时间了,但从来没有问过一个问题。今天我在Firefox的网站上,注意到它谈到了px和%就好像它已经过时了。该网站建议使用ViewHeight和view width或view像素(vh和vi或vpx)。用... 而且 ..????他们为什么要做出改变?

  • 问题内容: 我正在寻找一种在客户端(即在浏览器中)进行traceroute的方法。 据我所知,不可能通过Javascript或Flash发送具有任意TTL值的ICMP,UDP或TCP数据包。我知道Flash允许通过Actionscript中的Socket类进行TCP连接,但是它对于traceroute实现似乎没有用。 是开发浏览器插件的唯一解决方案吗? 编辑 :我刚刚发现它已经用Java小程序完成