注意：好的，当我输入这个问题时，我遇到了这个 建议使用
@media query但在 2011 年被问到的问题......
如您所知，CSS3 引入了新的 Viewport-percentage length unitsvh和，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(property) 修复像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项目的一部分，有静态 polyfills 。
我刚刚用纯 CSS（不需要 JS）为此做了一个非常丑陋但完美的解决方法。我遇到了一个 CSS 样式表，其中充满了需要为原生 Android 浏览器重写的“vw”声明（也用于高度和顶部/底部属性）（在 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%，例如 19.2px 用于 1920px 视口，并在整个 1920-320px 范围内使用大量媒体查询。通过这种方式，我在所有分辨率下使“rem”单位等于“vw”（步长为 10px，但您甚至可以尝试为每 1px 声明 html{font-size}）。然后我只是用 'rem' 批量替换了 'vw' 并欣赏了 Android 4.3 本机浏览器上的工作布局。
更重要的是，您甚至可以重新声明整个正文标签的字体大小（以您想要的任何单位：px、em、pt 等），并且它不会影响整个样式表中的 'rem' 与 'vw' 的相等性.
希望这可以帮助。我知道它看起来有点傻，但就像一个魅力。请记住：如果某些东西看起来很愚蠢，但有效，那它并不愚蠢 :)
“jquery.columns”是迄今为止最好的解决方案。
https://github.com/elclanrs/jquery.columns
您只需要 2 行代码即可将“vh”变成“全浏览器规模”。
在 html 中声明一个类：
<img src="example.jpg" class="width50vh" />
然后在javascript中：
$('.width50vh').css({width: '50vw'});
我发现的最简单和最优雅的解决方案是简单地制作一个具有高度的 div：1vh; 和宽度：1vw；当页面加载时，使用 getBoundingClientRect() 将这些值作为像素获取。然后在文档中添加一个侦听器以侦听屏幕调整大小并在调整屏幕大小时更新大小。
我将值保存在 vh 和 vw 的像素中，然后每当我需要使用 vh 时，我只会说 100 * vh，这会给我 100vh。
这是一个关于它的实现的代码片段，我的答案是在 vanilla js 中，不需要 jquery。
function getViewportUnits(){
const placeholder = document.getElementById("placeholder");
const vh = placeholder.getBoundingClientRect().height;
const vw = placeholder.getBoundingClientRect().width;
console.log({vh: vh, vw: vw});
}#placeholder{
background: red;
height: 1vh;
width: 1vw;
}<body onload="getViewportUnits()">
<div id="placeholder"></div>我发布了一个小型库，可以简化视口相关尺寸的使用。请记住，它不是 polyfill，因此它要求您在要调整大小的元素上应用类。例如，<div class="vh10 vw30">hello</div>将填充 10% 的高度和 30% 的宽度。