调整页面大小时从垂直角度获取元素

如何在调整页面大小时，我的页面上的元素能够垂直放置？调整页面大小时从垂直角度获取元素

现在它水平地工作，直到某个点，但我会如何做它具有不同的高度方向的设备？如果这些元素可以动态调整大小或者什么的，那将会很好。下面

代码：

<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

调整页面大小时从垂直角度获取元素

回答

相关问题