在我的Ipad和Iphone上测试时,我的背景看起来完全错了。我有搜索这里的stackoverflow为我的问题,但没有运气!我知道"background-size:cover"是问题,但我不知道如何解决它。
#home, #music, #videos, #tourplan, #facebook, #profile, #downloads {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#home, #videos, #downloads {
height: 100vh;
}
#music, #tourplan, #facebook, #profile {
min-height: 100vh;
height:auto;
}
我同意"background-size: cover"在Ipad和Iphone上由于宽度小而不能正常工作。所以,如果你没有问题,你可以为Ipad和Iphone使用任何背景颜色(根据你的选择)。
/* Ipad Layout: 480px. */
@media only screen and (min-width:480px) and (max-width: 767px){ {
#home, #music, #videos, #tourplan, #facebook, #profile, #downloads {
background: #ddd; /* Just as an example */
}
}
/* Iphone Layout: 360px. */
@media only screen and (min-width: 360px) and (max-width: 479px) {
#home, #music, #videos, #tourplan, #facebook, #profile, #downloads {
background: #ddd; /* Just as an example */
}
}
如果您想使用不同的背景颜色而不是不同的背景图像,您可以使用以下代码:
#home {
background: #ddd; /* Just as an example */
}
#music {
background: #eee; /* Just as an example */
}
#videos {
background: #fff; /* Just as an example */
}
#tourplan {
background: #000; /* Just as an example */
}
#facebook {
background: #00ff00; /* Just as an example */
}
#profile {
background: #ff0000; /* Just as an example */
}
#downloads {
background: #0000ff; /* Just as an example */
}
在这种情况下,您需要将此代码放入特定的CSS媒体查询区域,如。您需要更改元素颜色,如文本颜色等。要查看这样的网站,请访问此链接:http://www.ollo.com.br/m/
保持好。