Jquery 在响应性强的站点上定位

我需要一个登录页的帮助，它有4个内容，一个标志，标题文本，说明文本和按钮

第一部分是我希望根据浏览器调整所有内容的大小，如果浏览器大，则所有内容都变大，如果浏览器小，则所有内容都变小

第二部分是我希望正文在浏览器的中间，无论它是什么高度，我想要它下面的描述文本和它上面的标志图像，最后在描述文本下面的按钮。 以下是我目前掌握的情况：

我很确定这是我需要帮助的css，我已经附上了，但看看演示，我在其他地方需要帮助

以下是css：

* {
margin:0;
padding:0;
}
html {
width: 100%;
height: 100%;
background-size: cover;
overflow-y: scroll;
}
body {
width: 100%;
height: 100%;
margin-left:auto;
margin-right:auto;
background: inherit;
font-family: 'Helvetica Neue', sans-serif;
font-size: 2em;
/* overflow: hidden; enable to disable scrolling */
background:red;
}
#page-wrapper {
height:100%;
width:100%;
}
.full-content {
height: 100%;
width: 100%;
}
.full-width {
position:absolute;
bottom:10%;
text-align:center;
}
.big-logo {
padding-left:57px;
margin-top:10%;
}
.big-logo img {
height:auto;
width:320px;
}
.big-title {    
font-size: 3em;
text-transform: uppercase;
font-weight:800;
display: block;
margin-top:5%;
}
.title-description {
font: 12px;
display: block;
margin-top:5%;
}
.button-container {
display: inline-block;
margin-top:5%;
}
.button {
color: #fff;
font-size: 12px;
font-weight: 300;
padding: 7px 30px;
cursor: pointer;
vertical-align: middle; 
text-decoration: none;
letter-spacing: 3px;
border: 2px solid;
display: inline-block;
}

---

媒体查询呢？还有其他事情，比如：

@media only screen and (max-width:320px) {
 .selector { font-size: 14px }
}

以下是其他：