Question

我有一个包含六个部分的单页网站。我希望每个部分都能填满整个屏幕或视口（特别是iPhone 4s）。目前，它就像每个部分堆叠在一起（这不是我想要的）。

HTML标记：

<meta name="viewport" content="intial-scale = 1.0, maximum-scale = 1.0" />

HTML（仅发布一个部分 - 每个部分基本相同）：

<section class="container" id="music">
<div class="center">
    <div class="info">
    <h1 class="headline">music</h1>
    <ul>
      <li><a href="#">Black Hour EP</a></li>
      <li><a href="#">You're Invited (Coming Soon)</a></li>
    </ul>
    </div>
</div>
</section>

CSS @media查询：

@media (min--moz-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1),
       (-webkit-min-device-pixel-ratio: 2),
       (min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {

    #home{width: 100%;
        background-image: url(../images/landingPage@2x.jpg);}

    #navbar{display: none;}

    #albumCover{width: 400px;
        height: 400px;
        margin-top: 175px;}

    #albumCover p{font-size: 6em;
        padding-top: 150px;}

    #about{width: 100%;
        background-image: url(../images/about@2x.jpg);}

    .info{width: 500px;
        height: 500px;
        margin: 200px 0 0 200px;}

    .headline{font-size: 3em;
        margin: -20px 0 5px 0;}

    .info p{padding-top: 30px;
        font-size: 1em;
        margin-bottom: -100px;}

    #music{width: 100%;
        background-image: url(../images/music@2x.jpg);}}

    .info ul li{text-align: center;
        font-family: eb-garamond, sans-serif;
        font-size: 1.5em;
        line-height: 2em;
        text-transform: capitalize;}

        /* Lighthouse */
        iframe{width: 50%;
            height: 50%;}

        #close{margin: 50px 0 15px 350px;
            padding: auto 5px;}

    #videos{width: 100%;
        background-image: url(../images/videos@2x.jpg);}}

    #connect{width: 100%;
        background-image: url(../images/connect@2x.jpg);}}

    #contact{width: 100%;
        background-image: url(../images/contact@2x.jpg);}}

    #email a{font-size: .625em;}

    .primeLine{font-size: 1em;}

    #email li{margin: 0;}   

}

以下是当前状态的屏幕截图：http://postimg.org/image/ya1488ebb/

有没有人有任何想法可以帮助我或让我思考正确的方向？

Answer 1

然后，我认为这将解决您的问题，jsFiddle。

您可以为不同的DIV，边距，文本，绝对元素等添加单独的背景。

{
    height: 300px;
    width: 100%;
    display: block;
    float: left;
    clear: none;
    position: relative;
}

Answer 2

在div中添加z-index和box-shadow可能会提供你所寻找的“堆叠页面”效果 - 请参阅此jsfiddle：http://jsfiddle.net/NZUWj/5/

.one {
    height: 300px;
    width: 100%;
    display: block;
    float: left;
    clear: none;
    position: relative;
    z-index: 6;
    background-color: red;
    -webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 5px 5px rgba(50, 50, 50, 0.75);
box-shadow:         0px 5px 5px rgba(50, 50, 50, 0.75);
}

就图像而言，背景图像大小和其他背景图像属性似乎得到了http://caniuse.com/#feat=background-img-opts的广泛支持，但如果您关注兼容性（IE 8），那么像backstretch.js这样的javascript解决方案可能会更好。

话虽如此，如果您的div不需要流动且始终保持100％宽度，则不需要所有这些额外的CSS属性。此格式将起作用：

.one {
    height: 300px;
    width: 100%;
    display: block;
    background-color: red;
   -webkit-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px -5px 5px rgba(50, 50, 50, 0.75);
box-shadow:         0px -5px 5px rgba(50, 50, 50, 0.75);
}

在jsfiddle中查看：http://jsfiddle.net/GEdLV/4/

如何在Mobile Safari中修复DOM

2 个答案: