Получение элементов с вертикальной точки зрения при изменении размера страницы

Question

Как бы получить элементы на моей странице, чтобы они соответствовали вертикали при изменении размера страницы?

Прямо сейчас он работает горизонтально до определенной точки, но как я могу это сделать для устройств с разной ориентацией по высоте? Было бы неплохо, если бы элементы могли динамически изменять размер или что-то в этом роде.

код ниже:

<div id="topPane"> 
     <h1 id="georgeLogo">Logo</h1> 
    <div id="login"> 
     <div id="facebookLoginButton">Continue with Facebook</div> 
     <br class="lb"> 
     <div class="center">or</div> 
     <br class="lb"> 
     <input type="text" placeholder="Email Address" required> 
     <br class="lb"> 
     <input type="text" placeholder="Password" required> 
     <br class="lb"> 
     <div id="standardLoginButton">Login</div> 
     <br class="lb"> 
     <div id="copyright">© Copyright 2014</div> 
    </div> 


    <div id="bottomPane"> 
     <div id="loginPane">Login</div> 
     <div id="registerPane">Sign Up</div> 
    </div> 

Jsfiddle: http://jsfiddle.net/3bcbstn6/

Answer 1

Попробуйте использовать медиа-запросы, например min-height и max-height в сочетании с единицами как vh которые относительно высоты окна, например :

@media only screen and (max-height: 550px) { 
    #georgeLogo { 
     font-size: 14vh; 
    } 
    #login { 
     margin-top: 8vh; 
    } 
    .lb { 
     line-height: 4vh !important; 
    } 
} 
@media only screen and (max-height: 400px) { 
    #georgeLogo { 
     font-size: 14vh; 
    } 
    #login { 
     margin-top: 2vh; 
    } 
    .lb { 
     line-height: 1vh !important; 
    } 
} 

Jsfiddle: http://jsfiddle.net/h30c863e/1/

Более подробная информация и примеры здесь: http://css-tricks.com/viewport-sized-typography/