뷰포트의 높이를 기반으로 요소의 축척을 자동으로 설정합니다.

Question

다양한 뷰포트 높이를 기준으로 CSS로 요소의 크기를 조절하는 것은 지루하고 지루한 작업이므로 IMO가 필요하지 않습니다. 그리고 다시, 나는 완전히 틀릴 수도 있습니다.

jQuery를 사용하여 뷰포트의 높이를 기반으로 요소의 축척을 자동으로 설정할 수 있는지 궁금합니다.

Stackflow에서 사용할 수없는 모든 링크를 확인한 결과 http://ricostacruz.com/jquery.transit/은 실행 가능한 옵션처럼 보이지만 높이를 계산하고 값으로 변환하는 방법을 알지 못합니다. CSS 변형 스케일에 사용하십시오. 확실치 않지만 특정 높이가 미리 설정된 값이되도록 "체크 포인트"가 필요할 수 있습니다.

스케일을 수동으로 조정할 수 있어야하므로 요소가 대부분의 뷰포트에 맞도록 조정할 수 있습니다. 나는 뷰포트의 높이에 따라 규모와 방향이 변경되는 경우에도 업데이트 할 클래스 .scales 내에서 전체 내용을 필요 http://testsiten.se/modernaglas/images/showcase/bedroom/

:

이

내 예입니다.

너비가 높이와 같기 때문에 높이보다 넓지 않으므로 문제가되지 않습니다.

나는 전체 디자인을 깨뜨릴 것이므로 .scales 높이를 변경하고 싶지 않습니다.

jQuery를 사용하여이 모든 작업을 더 쉽게 수행 할 수 있다고 생각한 이후 정리 된 적이없는 실제 엉터리 CSS 미디어 쿼리를 수행했습니다.

이것은 제 CSS입니다. 내 미디어 쿼리

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

의

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

하나는이 내 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 내부 요소를 많이 있고 배경 이미지가 또한있다. 그래서 스케일의 크기에 의존하는 요소가 너무 많기 때문에 높이를 설정하는 것보다 크기를 조정해야합니다.

내가 지금 이해하게 되었으면 좋겠다. : 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> 

< = 720 & & vpheight> 569 제대로 내 삼성 갤럭시 S3의 기능을 강제하기위한 것이다 이상한 vpwidth. 이상한 해상도 ...

Answer 1

당신은에서와 같이, $(window).height()를 사용할 수 있습니다

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

가 그 다음 높이에 따라 너비를 변경하고 두 속성을 설정, 뭔가 같은 : 그것은 충분히 쉽게

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

Answer 2

최상위 수준을 확장 할 수 요소를 뷰포트 높이의 일정 비율로 이동시킵니다. html 및 body 요소의 height 속성을 100 %로 설정하면 본문의 자식은 백분율 높이를 사용할 수 있으며 이는 뷰포트 높이에 해당합니다.

예를 들어, 아래의 CSS와 같은 것은 등급의 div를 만들 것입니다. 뷰포트의 높이를 채우십시오.. 어디서나 마크 업 또한 이전 버전의 브라우저에 대해 너무 걱정하지 않으면 Example codepen

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

, 뷰포트 단위는 항상 크기 조정에 즉시 응답하지 않고 스크롤바가 관련되는 경우 예상치 않게 작동 할 수 있습니다, 그래서 절충안이 있습니다.