我需要有关着陆页的帮助,它有 4 个内容, Logo 、标题文本、描述文本和按钮。
第一部分是我希望所有内容都根据浏览器调整大小,如果浏览器很大,那么一切都会变大,如果浏览器很小,那么一切都会变小。
第二部分是我希望主文本位于浏览器的中间,无论它的高度是多少,然后我想要它下面的描述文本和它上面的 Logo 图像,最后是按钮下面的按钮描述文字。
这是我目前拥有的: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;
}
最佳答案
媒体查询怎么样?以及其他类似的东西:
@media only screen and (max-width:320px) {
.selector { font-size: 14px }
}
这里是其他人:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
关于jquery - 在响应式网站上定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25329342/