2

我有一个包含六个部分的单页网站。我希望每个部分都填满整个屏幕或视口（特别是 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/

有没有人有任何想法可以帮助我或让我沿着正确的轨道思考？

4

2 回答 2

2

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

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

{
    height: 300px;
    width: 100%;
    display: block;
    float: left;
    clear: none;
    position: relative;
}
于 2013-09-02T03:41:53.083 回答
1

将 z-index 与 box-shadow 一起添加到 div 可能会提供您正在寻找的“堆叠页面”效果 - 请参阅此 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/

于 2013-09-02T04:29:56.143 回答