在响应式网站上定位

Question

我需要有关着陆页的帮助，它有 4 个内容，一个徽标、标题文本、描述文本和按钮。

第一部分是我希望根据浏览器调整所有内容的大小，如果浏览器很大，那么一切都会变大，如果浏览器很小，那么一切都会变小。

第二部分是我希望主文本位于浏览器的中间，无论它的高度是多少，然后我希望描述文本位于其下方，徽标图像位于其上方，最后是按钮下方描述文本。

这是我目前所拥有的：http://jsfiddle.net/9wup4wm4/1/

我很确定这是我附加的需要帮助的 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;
}

Answer 1

媒体查询怎么样？以及其他诸如：

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

这里的其他人：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/