Jquery 根据视口的高度自动设置元素的比例

至少可以说，根据不同的视口高度使用CSS缩放元素是乏味的，应该不需要。再说一次，我可能完全错了

我想知道是否可以使用jQuery根据视口的高度自动设置元素的比例

我已经检查了Stackflow上的每个链接，但没有任何效果，我已经检查了这个看起来可行的选项，但我不知道如何计算高度并将其转换为一个值，以便我可以将其用于CSS转换比例。 我不确定，但我可能需要“检查点”，以便特定高度为预设值

我还需要能够手动调整比例，以便调整比例，使元素适合大多数视口

这是我的例子：

我需要类中的全部内容。根据视口的高度缩放，如果方向改变，也会更新

宽度与高度相同，因此不会造成问题，因为它不会比高度宽

我不想更改

.scales

的高度，因为那样会破坏整个设计

我已经做了一些真正糟糕的CSS媒体查询，这些查询还没有被清理，因为我认为用jQuery来完成所有这一切必须更容易

这是我的CSS

body, html{ background-color: #333333; font-family: tahoma; margin: 0; padding: 0; }
img{background: none}
h1 {font-size: 18px; margin: 0; font-weight: normal; text-align: center}
#ChangableElements {width: 958px; margin:0 auto; }
#navigation {background-color: #bdc7c9; color: #6e7377;padding: 7px 8px 5px 21px;}
#navigation div div {display: inline-block;}
#navigation div div span{display: block;}
.nav_glas, .nav_ram {display: inline-block;font-size: 13px;text-align: center;}
.nav_glas div, .nav_ram div{padding: 1px 13px 0 10px;}
.nav_glas div a, .nav_ram div a{display: inline-block; margin: 8px 0 10px;}
.nav_ram{float: right;}
.work_area {margin-bottom: 0; background: url("images/bg_image.png") repeat scroll 0 0 transparent; height: auto;width: 958px;}

.border, .grid{margin-top: 0px;position: absolute;top: 0;}
.grid_on {width: 50px}
.headers h1{display: inline-block;}
.headers h1:first-child{float: left; margin-left: 10px; }
.headers{display: block!important;padding: 0 !important;}


.hidden {display: none;}

我的一个媒体问题

@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (orientation : portrait) { 
div.scales
{
   transform: scale(0.37);
   -ms-transform: scale(0.37); /* IE 9 */
   -webkit-transform: scale(0.37); /* Safari and Chrome */
   -o-transform: scale(0.37); /* Opera */
   -moz-transform: scale(0.37); /* Firefox */
   transform-origin: top center;
   -ms-transform-origin: top center;
   -webkit-transform-origin: top center;
   -o-transform-origin: top center;
   -moz-transform-origin: top center;
}
}

这是我的jQuery：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

    function changeImage(el, img_url) {
        $(document).find(el).attr('src', img_url);
    }
    $(document).ready(function(){
        // add color btns event
        $('.nav_glas').find('a.spegel').click(function(){
            changeImage('#mirror', 'images/spegel.png');
        });
        $('.nav_glas').find('a.vit_traskiva').click(function(){
            changeImage('#mirror', 'images/vit_traskiva.png');
        });
        $('.nav_glas').find('a.vitt_glas').click(function(){
            changeImage('#mirror', 'images/vitt_glas.png');
        });
        $('.nav_glas').find('a.metall_glas').click(function(){
            changeImage('#mirror', 'images/metall_gra.png');
        });
        $('.nav_glas').find('a.gult_glas').click(function(){
            changeImage('#mirror', 'images/gult_glas.png');
        });
        $('.nav_glas').find('a.rott_glas').click(function(){
            changeImage('#mirror', 'images/rott_glas.png');
        });
        $('.nav_glas').find('a.svart_glas').click(function(){
            changeImage('#mirror', 'images/svart_glas.png');
        });
    });
</script>
<script type="text/javascript">
    function changeImage(el, img_url) {
        $(document).find(el).attr('src', img_url);
    }
    var app = {
        isActive: function(el){
            if($(el).hasClass('active')) {
                return true;
            }
            else {
                return false;
            }
        },
        whoActive: function(){
            return $('.active').attr('id');
        },
        change_grid: function(image){
            changeImage('#grid', image);
        }
    }
    $(document).ready(function(){
        // add color btns event
        $('.nav_ram').find('a.vit').click(function(){

            $('a').removeClass('active');
            $(this).addClass('active');
            changeImage('#border', 'images/vit_el.png');
            app.change_grid('images/grid_vit.png');


        });
        $('.nav_ram').find('a.silvermatt').click(function(){
            $('a').removeClass('active');
            $(this).addClass('active');
            changeImage('#border', 'images/silver_el.png');
            app.change_grid('images/grid_silvermatt.png');
        });
        $('.nav_ram').find('a.svart').click(function(){
            $('a').removeClass('active');
            $(this).addClass('active');

            changeImage('#border', 'images/svart_blank_el.png');
            app.change_grid('images/grid_svart.png');
        });

        // grid_turn_on event
        $('.grid_turn_on').click(function(event){

            var grid_on = $('.grid_on'); // div el
            var grid = $('#grid');
            var is_hidden = false;

            if(grid.hasClass('hidden')) {
                is_hidden = true;
            }
            else {
                is_hidden = false;
            }

            log(app.whoActive());
            switch (app.whoActive()) {
                case 'vit':
                    log('is vit');
                    if(is_hidden) {
                        grid.removeClass('hidden');
                        grid_on.find('span').empty().append('Ja/Nej');
                        grid_on.find('img').attr('src','images/grid_on.jpg');
                        changeImage('#grid', 'images/grid_silvermatt.png');
                    } else {
                        grid.addClass('hidden');
                        grid_on.find('span').empty().append('Ja/Nej');
                        grid_on.find('img').attr('src','images/grid_off.jpg');
                    }


                    break;
                case 'silvermatt':
                    log('is silver');
                    if(is_hidden) {
                        grid.removeClass('hidden');
                        grid_on.find('span').empty().append('Ja/Nej');
                        grid_on.find('img').attr('src','images/grid_on.jpg');
                        changeImage('#grid', 'images/grid_silvermatt.png');
                    } else {
                        grid.addClass('hidden');
                        grid_on.find('span').empty().append('Ja/Nej');
                        grid_on.find('img').attr('src','images/grid_off.jpg');
                    }

                    break;
                case 'svart':
                    log('is svart');
                    if(is_hidden) {
                        grid.removeClass('hidden');
                        grid_on.find('span').empty().append('Ja/Nej');
                        grid_on.find('img').attr('src','images/grid_on.jpg');
                        changeImage('#grid', 'images/grid_svart.png');
                    } else {
                        grid.addClass('hidden');
                        grid_on.find('span').empty().append('Ja/Nej');
                        grid_on.find('img').attr('src','images/grid_off.jpg');
                    }
                    break;
                default:
                    if(is_hidden) {
                        grid.removeClass('hidden');
                        grid_on.find('span').empty().append('Ja/Nej');
                        grid_on.find('img').attr('src','images/grid_on.jpg');
                    }
                    else {
                        grid.addClass('hidden');
                        grid_on.find('span').empty().append('Ja/Nej');
                        grid_on.find('img').attr('src','images/grid_off.jpg');
                    }
            }



        });
    });
</script>

函数更改图像（el、img\U url）{
$（document.find（el.attr（'src'，img_url））；
}
$（文档）.ready（函数（）{
//添加彩色BTN事件
$（'.nav_glas'）。查找（'a.spegel'）。单击（函数（）{
changeImage（“#mirror”，“images/spegel.png”）；
});
$（'.nav_glas'）。查找（'a.vit_traskiva'）。单击（函数（）{
changeImage（“#mirror”，“images/vit#u traskiva.png”）；
});
$（'.nav_glas'）。查找（'a.vitt_glas'）。单击（函数（）{
changeImage（“#mirror”，“images/vitt#u glas.png”）；
});
$（'.nav_glas'）。查找（'a.metall_glas'）。单击（函数（）{
changeImage（“#mirror”、“images/metall#u gra.png”）；
});
$（'.nav_glas'）。查找（'a.gult_glas'）。单击（函数（）{
changeImage（“#mirror”、“images/gult#u glas.png”）；
});
$（'.nav_glas'）。查找（'a.rott_glas'）。单击（函数（）{
changeImage（“#mirror”、“images/rott#u glas.png”）；
});
$（'.nav_glas'）。查找（'a.svart_glas'）。单击（函数（）{
changeImage（“#mirror”，“images/svart_glas.png”）；
});
});
函数更改图像（el、img\U url）{
$（document.find（el.attr（'src'，img_url））；
}
变量应用={
isActive：功能（el）{
if（$（el）.hasClass（'active'））{
返回true；
}
否则{
返回false；
}
},
whoActive:function（）{
返回$（'.active'）.attr（'id'）；
},
更改网格：函数（图像）{
更改图像（“#网格”，图像）；
}
}
$（文档）.ready（函数（）{
//添加彩色BTN事件
$（'.nav_ram'）。查找（'a.vit'）。单击（函数（）{
$（'a'）.removeClass（'active'）；
$（this.addClass（'active'）；
changeImage（“#border”，“images/vit#u el.png”）；
应用程序变更网格（“图像/网格vit.png”）；
});
$（'.nav_ram'）。查找（'a.silvermatt'）。单击（函数（）{
$（'a'）.removeClass（'active'）；
$（this.addClass（'active'）；
changeImage（“#border”，“images/silver#el.png”）；
app.change_grid（'images/grid_silvermatt.png'）；
});
$（'.nav_ram'）。查找（'a.svart'）。单击（函数（）{
$（'a'）.removeClass（'active'）；
$（this.addClass（'active'）；
changeImage（“#border”，“images/svart_blank_el.png”）；
app.change_grid（'images/grid_svart.png'）；
});
//电网开启事件
$（“.grid\u打开”）。单击（函数（事件）{
var grid_on=$（'.grid_on'）；//div el
变量网格=$（“#网格”）；
var是_hidden=false；
if（grid.hasClass（'hidden'））{
隐藏=真实；
}
否则{
is_hidden=false；
}
日志（app.whoActive（））；
开关（app.whoActive（））{
案件‘vit’：
log（‘是vit’）；
如果（是否隐藏）{
grid.removeClass（'hidden'）；
grid_on.find（'span'）.empty（）.append（'Ja/Nej'）；
grid_on.find（'img'）.attr（'src'，'images/grid_on.jpg'）；
changeImage（“#grid”，“images/grid_silvermatt.png”）；
}否则{
grid.addClass（'hidden'）；
grid_on.find（'span'）.empty（）.append（'Ja/Nej'）；
grid_on.find（'img'）.attr（'src'，'images/grid_off.jpg'）；
}
打破
案例“silvermatt”：
原木（“是银的”）；
如果（是否隐藏）{
grid.removeClass（'hidden'）；
grid_on.find（'span'）.empty（）.append（'Ja/Nej'）；
grid_on.find（'img'）.attr（'src'，'images/grid_on.jpg'）；
changeImage（“#grid”，“images/grid_silvermatt.png”）；
}否则{
grid.addClass（'hidden'）；
grid_on.find（'span'）.empty（）.append（'Ja/Nej'）；
grid_on.find（'img'）.attr（'src'，'images/grid_off.jpg'）；
}
打破
案例“svart”：
日志（“是svart”）；
如果（是否隐藏）{
grid.removeClass（'hidden'）；
grid_on.find（'span'）.empty（）.append（'Ja/Nej'）；
网格_on.find（'img'）.att
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title>mirror</title>
</head>

<body>
    <div class="scales" id="ChangableElements">
        <div class="work_area">
            <img src="images/grid_svart.png" alt="" id="grid" class="grid">
            <img src="images/svart_blank_el.png" alt="" id="border" class="border">
            <img src="images/vitt_glas.png" alt="" id="mirror">
        </div>
        <div id="navigation">
            <div class="nav_glas">
                <h1>Välj färg på glas/skiva</h1>
                <div><a class="spegel"><img src="images/pic1.jpg" alt=""></a><span>Spegel</span></div>
                <div><a class="vit_traskiva"><img src="images/pic2.jpg" alt=""></a><span>Vit träskiva</span></div>
                <div><a class="vitt_glas"><img src="images/pic3.jpg" alt=""></a><span>Vitt glas</span></div>
                <div><a class="metall_glas"><img src="images/pic4.jpg" alt=""></a><span>Metallgrått glas</span></div>
                <div><a class="gult_glas"><img src="images/pic5.jpg" alt=""></a><span>Gult glas</span></div>
                <div><a class="rott_glas"><img src="images/pic6.jpg" alt=""></a><span>Rött glas</span></div>
                <div><a class="svart_glas"><img src="images/pic7.jpg" alt=""></a><span>Svart glas</span></div>
            </div>
            <div class="nav_ram" id="tfoot">
                <div class="headers">
                    <h1>Spröjs</h1>
                    <h1>Välj färg på dörrens ram</h1>
                </div>
                <div class="grid_on"><a class="grid_turn_on" ><img src="images/grid_on.jpg" alt=""></a><span>Ja/Nej</span></div>
                <div><a class="vit" id="vit"><img src="images/pic2_1.jpg" alt=""></a><span>Vit blank</span></div>
                <div><a class="silvermatt" id="silvermatt"><img src="images/pic2_2.jpg" alt=""></a><span>Silvermatt</span></div>
                <div><a class="svart" id="svart"><img src="images/pic2_3.jpg" alt=""></a><span>Svart blank</span></div>
            </div>
        </div>
    </div>
</body>

</html>

<script type="text/javascript">
        $(document).ready(function(){
            $(window).on('resize', function(){
                var vpheight = $(window).height();
                var vpwidth = $(window).width();

        if(vpwidth>vpheight) {
          // Landscape
            var height = $(window).height() * 0.00148;
            var width = height / 2 * -958;
            $('.scales').css('transform', 'scale(' + height + ')');
            $('.scales').css('-ms-transform', 'scale(' + height + ')');
            $('.scales').css('-webkit-transform', 'scale(' + height + ')');
            $('.scales').css('-o-transform', 'scale(' + height + ')');
            $('.scales').css('-moz-transform', 'scale(' + height + ')');
            $('#ChangableElements').css({'left': width  + 'px'});
        } else if(vpwidth <=720 && vpheight > 569 ) {
            var height = $(window).height() * 0.000675;
            var width = height / 2 * -958;
            $('.scales').css('transform', 'scale(' + height + ')');
            $('.scales').css('-ms-transform', 'scale(' + height + ')');
            $('.scales').css('-webkit-transform', 'scale(' + height + ')');
            $('.scales').css('-o-transform', 'scale(' + height + ')');
            $('.scales').css('-moz-transform', 'scale(' + height + ')');
            $('#ChangableElements').css({'left': width  + 'px'});
        } else {
          // Portrait
            var height = $(window).height() * 0.000895;
            var width = height / 2 * -958;
            $('.scales').css('transform', 'scale(' + height + ')');
            $('.scales').css('-ms-transform', 'scale(' + height + ')');
            $('.scales').css('-webkit-transform', 'scale(' + height + ')');
            $('.scales').css('-o-transform', 'scale(' + height + ')');
            $('.scales').css('-moz-transform', 'scale(' + height + ')');
            $('#ChangableElements').css({'left': width  + 'px'});
        }
        }).resize()
    });
    </script>

var winHeight = $(window).height();

$("#theElement").css({'width':varWidth, 'height':varHeight});

html, body {
  height:100%;
  margin:0;
}
.scale {
  background-color:orange;
  width:200px;
  height:100%;
  margin:0 auto;
}

body {
  margin:0;
}
.scale {
  background-color:orange;
  width:100vh;
  height:100vh;
  margin:0 auto;
}