是否有跨浏览器javascript使vh和vw单元工作_Javascript_Jquery_Css

是否有跨浏览器javascript使vh和vw单元工作

javascript jquery css

是否有跨浏览器javascript使vh和vw单元工作,javascript,jquery,css,Javascript,Jquery,Css,注意：好的，当我输入这个问题时，我遇到了建议使用@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 he

注意：好的，当我输入这个问题时，我遇到了建议使用

@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（属性）修复像这样的插件使用

.css（'margin-right'）

获取元素的右边距，使用

.css（'margin-right'，'12px'）

设置元素的右边距。这是错误的，因为没有检查

props

是否是字符串以及是否给出了多个参数。通过检查

props

是否为字符串修复了此问题。如果是，并且有多个参数，参数将被重写到一个对象中，否则不使用

parseProps（$.extend（{}，props））

更新4:响应式布局插件（正在开发中）

我试了很久。首先，这里是CSS示例：。（调整输出面板的大小）。请注意，

字体大小

不适用于视口单位，至少在最新的Chrome上是这样

下面是我对jQuery的尝试。jQuery演示程序也可以与字体一起使用。我还没有对它进行过广泛的测试，但它似乎适用于大多数属性，因为它只是将值转换为像素，然后在

窗口上调用插件。resize

它会不断更新

更新：更新了代码，可用于多种浏览器。如果您使用的不是Chrome，那么就在本地进行测试，因为jsBin在

窗口中的行为有点怪异。调整大小
更新2:扩展本机css
方法
更新3:在插件内部处理window.resize事件，以便无缝集成
要点（本地测试）：

/*
*带有jQuery的CSS视口单元
* http://www.w3.org/TR/css3-values/#viewport-相对长度
*/
;（函数（$，窗口）{
var$win=$（窗口）
，_css=$.fn.css；
函数视口像素（val）{
变量百分比=val.match（/[\d.]+/）[0]/100
，单位=val.match（/[vwh]+/）[0]；
返回值（单位=='vh'？$win.height（）：$win.width（））*百分比+'px'；
}
函数解析道具（道具）{
var p，prop；
对于（道具中的p）{
道具=道具[p]；
如果（/[vwh]$/.test（prop））{
道具[p]=视口像素（道具）；
}
}
返回道具；
}
$.fn.css=功能（道具）{
var self=这个
，originalaarguments=参数
，update=函数（）{
if（props的类型=='string'| | props-instanceof-string）{
如果（originalArguments.length>1）{
var argumentsObject={}；
argumentsObject[originalArguments[0]]=originalArguments[1]；
返回_css.call（self，parseProps（$.extend（{}，argumentsObject））；
}否则{
返回css.call（self，props）；
}
}否则{
返回_css.call（self，parseProps（$.extend（{}，props））；
}
};
$win.resize（update.resize（）；
返回更新（）；
};
}（jQuery，window））；
//用法：
$（'div'）.css({
高度：'50vh'，
宽度：“50vw”，
玛金托普：“25vh”，
边际左图：“25vw”，
fontSize:'10vw'
});是我所知道的唯一一种polyfill——它正在开发中，但在本帖发布时起作用。作为和项目的一部分，还有静态多边形填充。我在Android 4.3股票浏览器（不支持大众、vh等）中遇到了这个问题。
我解决这个问题的方法是使用“rem”作为字体大小单位，并使用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 */
}

下面是代码的演示：
我编写了小助手来处理这个问题。它在所有主浏览器上都受支持，并使用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>


例子
示例文本一（vh5）
示例文本二（vw3）
示例文本三（vh4）
示例文本4（vh4）
//初始化对象
var supportVhVw=新的supportVhVw（）；
//缩放所有文本
支持vhvw.setVh（#textOne“，5）；
支持vhvw.setVw（“文本二”，3）；
支持vhvw.setVh（“.textMain”，4）；

它可在GitHub上获得：




JSFIDLE上的示例：
我发布了一个小库，可以简化视口相对尺寸的使用。请记住，它不是多边形填充，因此需要对要调整大小的元素应用类。例如，hello
将填充高度的10%和宽度的30%
请查看：
“jquery.columns”是目前为止最好的解决方案

你只需要两行代码就可以把“vh”变成“全浏览器比例”
用html声明一个类：
<img src="example.jpg" class="width50vh" />

我刚刚用纯CSS（无需JS）做了一个非常难看但非常有效的解决方案。
我遇到了一个CSS样式表，其中充满了“vw”声明（也用于高度和顶部/底部属性），需要为本机Android浏览器（版本4.3及以下版本不支持“vw”单元）重写这些声明
我没有将所有内容重写为相对于父级宽度的百分比（因此DOM中的深度是最复杂的计算），这甚至在我到达第一个{height:Xvw}声明之前都会让我头疼，我为自己生成了以下样式表：

我想你们都熟悉“他们”单位（如果不是：）。此后
$('.width50vh').css({width: '50vw'});