我正在尝试自适应设计。
此处链接:http://truewizard.com.au/buildzone/v2/
我已经从我的关系中附上了这个问题的图片。
我认为这可能与这行代码有关:
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
任何想法?
CSS: body,html { 填充:0像素; 保证金:0像素; 高度:100%; }
body {
background:#0f0f0f;
font-family: "Calibri", Georgia, sans-serif;
font-size:14px;
line-height:30px;
color:#bdbdbd;
}
a {
text-decoration:none;
}
/* Clearfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/*Header*/
#title_bar #logo {
float: left;
}
#title_bar #phone-number {
float: right;
}
#banner {
background:url(images/banner.jpg) no-repeat;
}
#banner .container {
position:relative;
}
.learn_more {
font-size:18px;
display:inline-block;
padding-right:15px;
background:url(images/learn_more_arrow.png) no-repeat right center;
}
.learn_more a {
color:#63d1ff;
}
/*service Tabs*/
.tab_body {
position:relative;
}
.tab_body img {
margin:0 auto;
display:block;
position:relative;
top:25%;
}
/*Main Wrap*/
#main_wrap {
padding-top:40px;
}
#quote_form {
width:385px;
height:409px;
background:url(images/quote_form.jpg) no-repeat;
padding:90px 40px 0 30px;
}
#quote_form input {
width:276px;
height:27px;
background:#1f1e1e;
border:1px solid #282828;
color:#bdbdbd;
}
#quote_form textarea {
background:#1f1e1e;
border:1px solid #282828;
width:272px;
height:200px;
}
#quote_form #quote_form_submit {
color:#bdbdbd;
background:#3c3c3c;
cursor:pointer;
}
#quote_form fieldset {
border:0;
}
#quote_form td {
padding:2px 0 2px 0;
}
#quote_form .quote_form_label {
padding-right:20px;
}
.highlight_text {
color:#25aae1;
font-size:18px;
}
#main_wrap .highlight_text {
margin:0;
}
h3 {
color:#fff;
margin:0;
padding:0;
font-size:14px;
}
.tab_title {
text-align:center;
height:37px;
padding-top:5px;
}
#testomonials_box {
height:433px;
clear:both;
}
#testomonials_bg {
height:331px;
background:url(images/testomonials_box.jpg);
}
#clients_say {
height:62px;
padding-top:40px;
}
/*slideshow*/
#slides {
position:relative;
height:331px;
}
.slides_container {
height:273px;
}
.slides_container div {
display:block;
}
.testomonial_text {
margin-top:40px;
text-align:center;
}
.testomonial_text p {
text-align:right;
padding-right:50px;
}
.pagination {
margin:0;
padding:0;
height:11px;
overflow:hidden;
width:84px;
margin:0 auto;
}
.pagination li {
float:left;
padding:0 5px 0 5px;
list-style:none;
}
.pagination li a {
background:url(images/pagination.png) no-repeat;
width:11px;
height:11px;
display:block;
padding-top:15px;
}
/*footer*/
#footer {
background:url(images/footer_bg.gif) repeat-x;
height:400px;
}
@media screen and (min-width: 960px) {
#banner {
height:613px;
}
#refreshing_approach {
margin:50px auto 10px auto;
}
#desc {
color:#fff;
font-size:18px;
width:640px;
padding-left:60px;
}
.container {
width:960px;
margin:0 auto;
}
#title_bar {
height:67px;
background:#1f1f1f;
}
#service_tabs {
height:200px;
position:absolute;
/*top:413px;*/
top:413px;
}
#web_design_tab {
width:210px;
height:200px;
margin-right:40px;
float:left;
}
#web_design_tab img{
}
#print_design_tab {
width:210px;
height:200px;
margin-right:40px;
float:left;
}
#ecommerce_tab {
width:210px;
height:200px;
margin-right:40px;
float:left;
}
#internet_marketing_tab {
width:210px;
height:200px;
float:left;
}
.tab_title {
width:210px;
background:#1f1f1f;
}
.tab_body {
height:158px;
width:210px;
background:#2f2e2e;
}
#left_box {
float:left;
width:460px;
}
#right_box {
float:right;
width:460px;
padding:10px 0 30px 0;
}
.testomonial_text {
width:960px;
font-size:40px;
line-height:50px;
}
}
@media screen and (min-width: 760px) and (max-width:959px) {
#banner {
height:960px;
width:100%;
}
#refreshing_approach {
margin:80px auto 10px auto;
max-width:100%;
}
#desc {
color:#fff;
font-size:18px;
width:640px;
padding-left:60px;
}
.container {
width:760px;
margin:0 auto;
}
#title_bar {
height:67px;
background:#1f1f1f;
}
#service_tabs {
height:547px;
position:absolute;
top:500px;
width:680px;
margin:0 auto;
padding:0 40px 0 40px;
}
#web_design_tab {
width:320px;
height:200px;
margin-right:40px;
float:left;
margin-bottom:40px;
}
#print_design_tab {
width:320px;
height:200px;
margin-right:0px;
float:left;
}
#ecommerce_tab {
width:320px;
height:200px;
margin-right:40px;
float:left;
margin-bottom:40px;
}
#internet_marketing_tab {
width:320px;
height:200px;
margin-right:0px;
float:left;
}
.tab_title {
width:320px;
background:#1f1f1f;
}
.tab_body {
height:158px;
width:320px;
background:#2f2e2e;
}
#left_box {
padding:0 40px 0 40px;
}
#right_box {
padding:0 40px 0 40px;
}
#quote_form {
margin:50px auto;
}
.testomonial_text {
width:760px;
font-size:35px;
line-height:35px;
}
}
答案 0 :(得分:1)
如果你想拉伸它使用背景大小:100%100%。如果它与原始图像不成比例,则使用'auto'中的一种尺寸 - background-image:100%auto;
答案 1 :(得分:1)
我知道你不是要求javascript修复,但这是我做的一个样本,它可以满足你的需求:
$(document).ready(function () {
$('html').css({
"background-size": $(window).width() + "px" + " " + $(window).height() + "px"
});
$('html').show();
});
$(window).resize(function () {
$('html').css({
"background-size": $(window).width() + "px" + " " + $(window).height() + "px"
});
});
它会在加载时抓取屏幕大小并调整大小并调整背景以适应。
答案 2 :(得分:0)
好的,背景图片位于不在体内的div上,并且具有固定的高度。 考虑在#banner上使用宽度:100%和/或显示(块或浮动内联)
答案 3 :(得分:0)
背景图片太小而无法适应屏幕,您需要更大的图像来重复背景图像,如:
background: url(images/banner.jpg) repeat;
答案 4 :(得分:0)
您是否已尝试使用AnyStretch等响应式解决方案:https://github.com/danmillar/jquery-anystretch?
发生此问题是因为设备正在尝试保留宽高比。