Question

还有问题。我在上一篇文章中被标记为不够具体，所以让我试着更具体一点。我无法找到一种方法让我的设计转换为我的iPhone 6.我一直在使用各种媒体查询，响应式设计适用于Firefox和Chrome“检查元素”。当我在iPhone 6上打开它时，它看起来像这样。

我的目标是让它看起来更接近这个：

这是网站： http://mattvwhittle.com/WeddingWebsite/index.html

以下是我在HTML元标记中编写的内容：
    meta charset =“utf-8”
meta name ='viewport'content =“width = device-width，
    initial-scale = 1，maximum-scale = 1，minimum-scale = 1，user-scalable = no“
meta http-equiv =“X-UA-Compatible”content =“IE = edge，chrome = 1”     meta name =“HandheldFriendly”content =“true”

以下是我就此事撰写的媒体查询：

@media only screen and (max-width: 480px) {
.fixed-bg {
    position: relative;
    background-size: auto contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
}

我是媒体查询新手，但我尝试过：

background-size: auto 100%;
background-size: 100% auto;
background-size: 100%;
background-size: conain;

这些都没有达到预期的效果。任何帮助将完全赞赏。谢谢你。

Answer 1

试试这个 - 您不应该需要background-size:100%，或者甚至需要媒体查询来处理背景图片。 CSS3 background-size:cover属性可以自行处理。适用于所有移动设备;

body {
    background-color: #000; 
    background-image: url(yourimage.jpg); 
    background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

Answer 2

background-attachment：fixed; 在iOS上不起作用它也不是最好的做法。我的网站很有用，但是如果有人在网站构建中偶然发现了这一点，那就不要做了！

我的固定背景无法在移动设备上正常显示

2 个答案: