調整頁面大小時從垂直角度獲取元素

如何在調整頁面大小時，我的頁面上的元素能夠垂直放置？調整頁面大小時從垂直角度獲取元素

現在它水平地工作，直到某個點，但我會如何做它具有不同的高度方向的設備？如果這些元素可以動態調整大小或者什麼的，那將會很好。下面

代碼：

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

來源

2014-11-08 methuselah

樣子你會需要一些媒體查詢（或javascript）https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – gskema 2014-11-08 11:13:04

是否要刪除元素之間的填充/邊距，以便所有項目都適合屏幕？如果是這樣，您需要JavaScript來檢測窗口的高度。 – 2014-11-08 11:14:46

嘗試在組合使用媒體查詢，例如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/

來源

2014-11-08 11:42:35 OfekA

調整頁面大小時從垂直角度獲取元素

回答

相關問題