Question

所以我将我的媒体查询设置为在最小宽度为756px（我的iphone 6S的分辨率）时，元素相对于前一个元素定位“X”像素。在我的Windows桌面上，我将元素定位到我想要的位置。但是，当我在iphone上打开网站时（使用默认的Safari浏览器），该元素关闭超过一百个像素！我的iphone上的元素位置比我桌面上显示的要高。有任何想法吗？我在桌面浏览器上检查了缩放，它们都设置为100％。

编辑：这是我的代码的小提琴模型。 https://jsfiddle.net/8f6y1pdx/1/

<header>
    <div id = "navContainer"><h1>Hello</h1></div>
    <div id = "backgroundImage"><img src = "http://cdn.wallpapersafari.com/4/18/laMvrx.jpg" width = "2560" alt = "bg image"></div>
</header>

<body>
    <div id = "contentOneContainer">Container one</div>
    <div id = "contentTwoContainer">Container two</div>
</body>

和css

html, body{
    padding: 0;
    margin: 0;
}

#navContainer{
    position: fixed;
    z-index: 0;
    width: 100%;
    background-color: black;
    color: white;
    height: 100px;
    text-align: center;
}

#backgroundImage{
    position: fixed;
    z-index: -2;
}

#backgroundImage img{
    width: 100%;
    max-width: 2560px;
}

#contentOneContainer{
    width: 100%;
    height: 500px;
    background-color: blue;
    position: relative;
    top: 417px;
    z-index: 0;
    color: white;
}

#contentTwoContainer{
    width: 100%;
    height: 250px;
    background-color: gray;
    position: relative;
    top: 417px;
    z-index: 0;
    color: white;
}

/*----------------------------------*\
  Responsive
\*----------------------------------*/
@media (min-width: 757px){
    #contentOneContainer{
    background-color: red;
    }
}

如果你调整屏幕尺寸，在757px我有容器开关的背景颜色。基本上，在我的桌面上，我使用第一个容器的顶部排列图像的底部。当我在iphone 6s上观看时（我不知道如何在移动设备上观看小提琴时使其工作）图像的底部和容器的顶部相隔一百多个像素。希望这会有帮助。此外，对不起，如果我的代码吹了。

Answer 1

在head部分添加视口元标记，以便媒体查询在移动设备上运行。

http://getbootstrap.com/css/#overview-mobile

元素在桌面与移动设备上的位置不同

1 个答案: