是否有任何跨浏览器的JavaScript使vh和vw单位的工作
注：好的，当我input这个问题，我遇到了这个问题，build议使用
@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是否是一个string，以及是否有多个参数。 通过检查props是否是string来修复它。 如果是这样，并有多个参数，则参数被重写成一个对象，否则不使用parseProps( $.extend( {}, props ) ) 。
更新4：插件的响应式布局https://github.com/elclanrs/jquery.columns （在作品中）
我给了这个（长）尝试。 首先是CSS示例： http : //jsbin.com/orajac/1/edit#css 。 （调整输出面板的大小）。 请注意， font-size不适用于视口单位，至less在最新的Chrome浏览器。
这里是我用jQuery做这个的尝试。 jQuery演示与字体一起工作在http://jsbin.com/izosuy/1/edit#javascript 。 还没有广泛的testing，但它似乎与大多数属性，因为它只是将值转换为像素，然后通过调用window.resize插件不断更新。
更新：更新的代码可以与许多浏览器一起使用。 如果您使用Chrome以外的任何软件进行本地testing，因为jsBin与window.resize有点奇怪。
更新2：扩展本地css方法。
更新3：处理插件内的window.resize事件，以便集成现在是无缝的。
要点（在本地testing）： 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' });
我正面临与Android 4.3股票浏览器（不支持vw，vh等）的这个问题。 我解决这个问题的方式是使用'rem'作为字体大小的单位，并dynamic改变<html>的字体大小与JavaScript
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' }); });
在你的CSS中，你可以使用'rem'而不是px，ems等
.element { font-size: 2.5rem; /* this is equivalent to 2.5vw */ }
下面是代码演示： http : //jsfiddle.net/4ut3e/
我写了一个小帮手来处理这个问题。 它支持所有主要的浏览器，并使用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"); } };
简单的例子如何在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>
它在GitHub上可用：
https://github.com/kgadzinowski/Support-Css-Vh-Vw
JSFiddle示例： http : //jsfiddle.net/5MMWJ/2/
Vminpoly是我所知道的唯一的polyfill – 它正在开发之中，但从这篇文章开始就起作用了。 有静态polyfills作为jquery列的一部分和-prefix-free项目以及。
我刚刚做了一个非常丑陋的，但完美的工作解决方法这个纯粹的CSS（不需要JS）。 我遇到了一个CSS样式表，里面充满了“原生Android浏览器”（在4.3及以下版本中不支持'vw'单元）需要重写的'vw'声明（也适用于高度和顶部/底部属性）。
而不是重写所有百分比，这是相对于父母的宽度（所以更深的DOM，最复杂的计算），这将使我头痛，甚至在我达到第一个{height：Xvw}声明之前，我产生了自己以下样式表： http : //splendige.pl/vw2rem.css
我想你们都熟悉'时间'单位（如果不是： http : //www.w3schools.com/cssref/css_units.asp ）。 经过一些testing后，我发现旧的Android浏览器（以及所有其他的）完全支持'rem'单元，它们与'em'相同，但是相对于ROOT元素的字体大小声明（在大多数情况下， html标签）。
所以最简单的方法就是声明html标签的字体大小等于视口宽度的1％，例如1920px视口为19.2px，并且在整个1920-320px范围内使用大量媒体查询。 通过这种方式，我在所有分辨率下将“rem”单位设置为等于“vw”（步长为10px，但您甚至可以尝试每隔1px声明一次html {font-size}）。 然后我用“rem”批量replace“vw”，并欣赏Android 4.3本机浏览器的工作布局。
而且，你甚至可以重新声明字体大小，即使对于整个身体标记（以你想要的任何单位：px，em，pt等等）来说，它也不会影响整个样式表中'vw'的'rem'相等。
希望这可以帮助。 我知道它看起来有点傻，但是像魅力一样。 记住：如果有些东西看起来很愚蠢，但是起作用，那不是愚蠢的:)
“jquery.columns”是迄今为止最好的解决scheme。
https://github.com/elclanrs/jquery.columns
您只需要2行代码就可以将“vh”转换为“全部浏览器规模”。
在html中声明一个类：
<img src="example.jpg" class="width50vh" />
然后在JavaScript中：
$('.width50vh').css({width: '50vw'});
我已经发布了一个小的库，简化了视口相对维度的使用。 请记住，这不是一个polyfill，所以它需要您对要resize的元素应用类。 例如， <div class="vh10 vw30">hello</div>将填充高度的10％和宽度的30％。
检查出来： https ： //github.com/joaocunha/v-unit
