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/

定位在响应式网站上

1 个答案: