是否有任何跨浏览器的 javascript 可以使 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不断更新。
更新：更新了代码以适用于许多浏览器。如果您使用 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'
});我在使用 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'
});
});
在你的 css 中，你可以使用“rem”而不是 px、ems 等
.element {
font-size: 2.5rem; /* this is equivalent to 2.5vw */
}
这是代码的演示：http : //jsfiddle.net/4ut3e/
我写了小帮手来处理这个问题。所有主要浏览器都支持它并使用 jQuery。
这里是：
支持VhVw.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——它正在开发中，但在这篇文章中有效。Jquery Columns和-prefix-free项目中也包含静态 polyfill 。
我刚刚使用 PURE CSS（不需要 JS）为此做了一个非常丑陋但完美的解决方法。我遇到了一个包含“vw”声明（也用于高度和顶部/底部属性）的 CSS 样式表，需要为原生 Android 浏览器（在 4.3 及以下版本不支持“vw”单位）重写。
不是将所有内容都重写为相对于父级宽度的百分比（因此在 DOM 中更深，最复杂的计算），这甚至在我到达第一个 { height: Xvw } 声明之前都会让我头疼，我自己生成了以下样式表：http : //splendige.pl/vw2rem.css
我想你们都熟悉“em”单位（如果不是：http : //www.w3schools.com/cssref/css_units.asp）。经过一些测试，我发现旧的 Android 浏览器（以及所有其他浏览器）完全支持“rem”单位，其工作方式与“em”相同，但与 ROOT 元素字体大小声明相关（在大多数情况下， html 标签）。
因此，使这项工作最简单的方法是声明 html 标签的字体大小等于视口宽度的 1%，例如，1920 像素视口为 19.2 像素，并在整个 1920-320 像素范围内使用大量媒体查询。通过这种方式，我在所有分辨率下都使“rem”单位等于“vw”（步长为 10px，但您甚至可以尝试为每 1px 声明 html{font-size}）。然后我只是用 'rem' 批量替换了 'vw' 并欣赏了 Android 4.3 本机浏览器上的工作布局。
更重要的是，您甚至可以为整个 body 标记重新声明字体大小（以您想要的任何单位：px、em、pt 等），并且它不会影响整个样式表中“rem”与“vw”的相等性.
希望这可以帮助。我知道它看起来有点傻，但效果很好。请记住：如果某件事看起来很愚蠢，但确实有效，那么它并不愚蠢 :)