0

至少可以说，使用基于各种视口高度的 CSS 缩放元素是乏味的，并且应该不需要 IMO。再说一次，我可能完全错了。

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

我检查了我可以在 Stackflow 上找到的每个链接都无济于事，我检查了http://ricostacruz.com/jquery.transit/这似乎是一个可行的选择，但我不知道如何计算高度和转弯它变成一个值，所以我可以将它用于 CSS 转换比例。我不确定，但我可能需要“检查点”，以便特定高度成为预设值。

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

这是我的例子： http ://testsiten.se/modernaglas/images/showcase/bedroom/

我需要类 .scales 中的全部内容根据视口的高度进行缩放，并且如果方向发生变化也需要更新。

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

我不想改变高度，.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>

这是我的 HTML。

<!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>

正如人们所看到的，我在 .scales 中有很多元素，其中还有一个背景图像。这就是为什么我需要它来缩放而不是设置高度，因为有很多元素取决于.scales 的比例。

我希望我现在让自己明白了。:D

编辑：终于学会了一些 jQ 以获得这个功能。

<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>

奇怪的 vpwidth <=720 && vpheight > 569 是为了强制我的三星 Galaxy S3 正常运行。奇怪的分辨率...

4

2 回答 2

1

将顶级元素缩放到视口高度的某个百分比很容易。只需将 html 和 body 元素的 height 属性设置为 100%，然后 body 的任何子元素都可以使用百分比高度，这将对应于视口高度。

例如，类似下面的 CSS 会使一个具有类比例的 div填充视口的高度。示例代码笔

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;
}

也就是说，视口单元并不总是立即响应调整大小，并且在涉及滚动条时可能会出现意外行为，因此需要权衡取舍。

于 2013-05-05T20:35:09.823 回答
0

You can use $(window).height(), like in:

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

Then change the width according to the height and set both properties, something like:

$("#theElement").css({'width':varWidth, 'height':varHeight});
于 2013-05-05T20:16:13.520 回答