jquery - 在响应式网站上定位

标签 jquery html css responsive-design

我需要有关着陆页的帮助,它有 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/

相关文章:

javascript - jquery ajax 检查结果是否为空

javascript - d3 中带有 slider 的 map 数据示例

php - 尝试显示 BLOB 时显示损坏的图像图标

javascript - 在 Polymer 2.0 中动态更改样式

css - 为所有东西设置最大高度——最佳实践?

javascript - 使用 HTML 5 更改移动设备上的键盘语言

javascript - 单击时,突出显示表列

jquery - 清除 div float css 属性

html - 具有边界折叠替代方案的砖墙

社交图标的 CSS 对齐问题